Gimir
@Gimir
JavaScript dev

Почему не изменяется state при использовании хука useState?

Привет всем! Впервые столкнулся с такой проблемой, вроде все делаю правильно, но стейт не изменяется.
Объявляю как обычно вот так:
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. Проект не мой, мне его дали добавить кое-какой функционал. Может кто сталкивался с таким?
  • Вопрос задан
  • 82 просмотра
Решения вопроса 1
@dimoff66
Кратко о себе: Я есть
В коде
1) onAddBtn ни откуда не вызывается, повесьте ее на кнопку с плюсом на событие onClick, чтобы она срабатывала
2) isAdding никуда не выводится, как вы узнаете, что она не срабатывает?

Если повесить ее на кнопку и вывести результат, то окажется, что все замечательно меняется
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы