Правильный способ изменения списка / объектов в ReactJS

Question

У меня есть фрагмент кода, ниже которого я не совсем уверен, правильно ли это сделано.

Вот мой блок кода:

onChangeMethod(event) {
    this.setState(prevState => ({
        list: [...prevState.list, event.value]
    }));
}

Я видел другой пример здесь, и я адаптировал свой код здесь. Можно ли это сделать таким образом? Это означает, что я могу принять значение события, переданного onChangeMethod() и использовать его непосредственно в функции, объявленной в setState()?

onChangeMethod(event) {
    this.setState((state, event.value) => ({
        list: state.list.push(event.value)
    }));
}

Ура сообщество

Answer 1

КодprevState => ({list: [...prevState.list, event.value]})является функцией анонимной стрелки с параметром с именем prevState возвращение объекта {list: [...prevState.list, event.value]}, Вы передаете эту функцию другой функции setState в качестве аргумента.setState функция позже вызывает вашу функцию, предоставляя текущее состояние компонентов в качестве первого аргумента (фактически она будет вызывать вашу функцию с 2 параметрами: prevState и props).

что-то вроде:function setState(callback) { callback(component.state, component.props) }

Ваш второй фрагмент кода неверен по двум причинам:

1. У него неправильный синтаксис - вы не можете вызвать переменную (параметр) event.value,

2. setState передаст реквизиты компонента как второй аргумент, а не событие

Я настоятельно рекомендую вам прочитать больше о функциях, функциях стрелок, обратных вызовах, замыканиях и JavaScript в целом.

Чтобы ответить на ваш вопрос, ваш первый пример кода - это путь, у вас уже есть переменная event в контексте функции анонимной стрелки, и она будет работать нормально.

Answer 2

Ответ на ваш вопрос - ДА, но сначала мне нужно исправить некоторые вещи в вашем коде.
При работе со свойством массива в вашем объекте состояния вы никогда не должны изменять состояние напрямую, используя методы массива, такие как push(), Для вашего случая использования вы можете сделать следующее:

onChangeMethod({ target: { value } }) {
    this.setState((prevState) => ({
        list: [ ...prevState.list, value ]
    }));
}

Или вы можете использовать concat() метод, который всегда возвращает новый массив следующим образом:

onChangeMethod({ target: { value } }) {
    this.setState({
        list: this.state.list.concat(value)
    });
}