React-JS меняет состояние компонента нажатием на кнопку

Question

Я использую Semantic-ui в моем проекте Reaction-JS, и у меня есть некоторые входные данные формы и кнопка отправки, эти формы имеют prop с именем error, и значение для этого свойства задается состоянием

Проблема в том, что когда я нажимаю на кнопку, я запускаю функцию, которая должна изменить состояние, которое назначено для этой ошибки, с false на true, через setState, но это не так. Но когда я что-то набираю на входе, реквизит меняется путем запуска onChange prop.

Кнопка, на которую я ссылаюсь, помечена Next

Вот код:

constructor(props) {
    super(props);
    this.state = {
        error: {
            firstName: false
        },
        general: {
            adminFirstName: "",
        },
    };
}
setData = () => {
    const {general} = this.state;
    const isValid = Object.keys(general)
        .filter( key => general[key].length !== 0 ).length === Object.keys(general).length;
    if (!isValid) { 
        Object.keys(general).map(key => { 
            if (general[key].length === 0) { this.setError(key); } });
    } else {
        // this.props.setGeneralData(general);
        // this.props.nextStep();
    }
    console.log(isValid);
    console.log(general);
};
setError = key => {
    const { error } = this.state;
    console.log(key);
    switch (key) {
    case "adminFirstName": {
        this.setState({ error: { ...error, firstName: true } });
    }
    default:
        this.setState({ error: { ...error } });
    }
};
render() {
    const { error, general } = this.state;
    return (
        <div className="block--part_75">
            <Form>
            {/* First name */}
                <Form.Field required error={error.firstName}>
                    <label>First name</label>
                    <Input onChange={e => {
                        e.target.value.length !== 0 
                            ? this.setState({ 
                                error: { ...error, firstName: false },
                                general: {
                                    ...general,
                                    adminFirstName: e.target.value
                                }
                            })
                            : this.setState({
                                error: { ...error, firstName: true },
                                general: {
                                    ...general,
                                    adminFirstName: e.target.value
                                }
                            });
                        }}
                    placeholder="First name"
                    type="text"
                    />
                </Form.Field>
            {/* First name */}
            </Form>
            <Button onClick={this.setData} floated="right">
                Next
            </Button>
        </div>
    );
}

Answer 1

Попробуйте добавить перед setState переменную, в которой будут храниться изменения состояния, которое вы хотите изменить, и после простого выполнения установки состояния, добавив эту переменную, вставьте объект, который вы добавляете.

Вот небольшой пример:

let changes = {...this.state.element, change};
this.SetState({data: changes});

Answer 2

Вы только что забыли оператор break в switch:

setError = key => {
    const { error } = this.state;
    console.log(key);
    switch (key) {
        case "adminFirstName":
            this.setState({ error: { ...error, firstName: true } });
            break;
        default:
            this.setState({ error: { ...error } });
    }
};

Answer 3

Помимо ответа Максимова. Я скопировал вашу проблему на codesandbox, добавление оператора прерывания работает правильно.

Кроме того, setState является асинхронным, поэтому ваш console.log() после setState не гарантирует вам новое состояние. У меня console.log результат с помощью обратного вызова setState и свойство firstName установлено в true.

ссылка на коды и поле

Answer 4

Необходимо использовать this.setState, чтобы иметь возможность инициировать изменения состояния. ЕСЛИ вы прямо устанавливаете данные в свойства State, обновления не запускаются.