Привет всем! Впервые столкнулся с такой проблемой, вроде все делаю правильно, но стейт не изменяется.
Объявляю как обычно вот так:
const [isAdding, setIsAdding] = useState(false);
Пытаюсь изменить вот так:
setIsAdding(true)
Но он не меняется, вообще не реагирует. Повесил событие на кнопку, при нажатии на которую, стейт должен меняться на true. Главное, когда я пытаюсь сделать это через коллбек, то работает console.log в коллбеке но стейт остается прежним.
setIsAdding(prevState => {
console.log(prevState);
return true;
})
Вот код компонента целиком:
import React, { useState } from 'react';
import styled from 'styled-components'
const Container = styled.div`
width: 100%;
padding: 50px 20px;
display: flex;
justify-content: space-around;
box-sizing: border-box;
flex-wrap: wrap;
`;
const TableContainer = styled.div`
width: 500px;
`;
const Table = styled.div`
width: 100%;
background-color: gray;
margin-bottom: 40px;
`;
const TableHeader = styled.p`
color: purple;
margin-bottom: 40px;
font-size: 24px;
font-weight: bold;
`;
const HeaderRow = styled.div`
width: 100%;
border-bottom: 2px solid purple;
color: purple;
text-align: center;
display: flex;
position: relative;
`;
const Row = styled.div`
width: 100%;
height: 50px;
border-bottom: 1px solid #fff;
display: flex;
position: relative;
box-sizing: border-box;
`;
const Col = styled.div`
width: ${props => props.position === 'left' ? '65%' : '35%'};
height: 100%;
padding: 10px;
border-right: 1px solid #fff;
display: flex;
align-items: center;
&:last-child {
border-right: none;
}
box-sizing: border-box;
`;
const RowButton = styled.div`
width: 30px;
height: 30px;
background-color: ${props => props.delete ? 'pink' : 'green'};
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
position: absolute;
right: -35px;
top: 50%;
margin-top: -15px;
font-size: 24px;
color: #fff;
`;
const EditBtn = styled.button`
padding: 10px 20px;
background-color: pink;
color: #fff;
cursor: pointer;
border: none;
text-transform: uppercase;
`;
const EditInput = styled.input`
width: 100%;
height: 30px;
border: none;
`;
const DirectoriesSettings = () => {
const [ isEditing, setIsEditing ] = useState(false);
const [ isAdding, setIsAdding ] = useState(false);
const onEditBtn = () => {
setIsEditing(prev => {
console.log(prev)
return true;
})
}
const onAddBtn = () => {
setIsEditing(false)
setIsAdding(true)
}
return (
<Container>
<TableContainer>
<Table>
<HeaderRow>
<Col position={'left'}>some text</Col>
<Col>some text</Col>
</HeaderRow>
<Row>
<Col position={'left'}>some text</Col>
<Col>3</Col>
</Row>
<Row>
<Col position={'left'}>some text</Col>
<Col>20</Col>
</Row>
<Row>
<Col position={'left'}>some text</Col>
<Col>80</Col>
</Row>
</Table>
</TableContainer>
<TableContainer>
<TableHeader>some text</TableHeader>
<Table>
<HeaderRow>
<Col position={'left'}>some text</Col>
<Col>some text</Col>
<RowButton>+</RowButton>
</HeaderRow>
<Row>
<Col position={'left'}>
{isEditing ? <EditInput type="text" defaultValue="some text" /> : 'some text'}
</Col>
<Col>
{isEditing ? <EditInput type="text" defaultValue="ПР" /> : 'ПР'}
</Col>
<RowButton delete>x</RowButton>
</Row>
<Row>
<Col position={'left'}>
{isEditing ? <EditInput type="text" defaultValue="some text" /> : 'some text'}
</Col>
<Col>
{isEditing ? <EditInput type="text" defaultValue="some text" /> : 'some text'}
</Col>
<RowButton delete>x</RowButton>
</Row>
<Row>
<Col position={'left'}>
{isEditing ? <EditInput type="text" defaultValue="some text" /> : 'some text'}
</Col>
<Col>
{isEditing ? <EditInput type="text" defaultValue="ФР" /> : 'ФР'}
</Col>
<RowButton delete>x</RowButton>
</Row>
</Table>
<EditBtn onClick={onEditBtn}>Редактировать</EditBtn>
</TableContainer>
</Container>
)
}
export default DirectoriesSettings;
PS. Проект не мой, мне его дали добавить кое-какой функционал. Может кто сталкивался с таким?
Средний