Блог

Главная - Вопросы по программированию - Обновление состояния с помощью оператора распространения

Обновление состояния с помощью оператора распространения

#reactjs #state

#reactjs #состояние

Вопрос:

Я хочу обновить состояние (без перехватов):

 class Table extends React.Component {
   
  constructor(props) {
     super(props)
     this.state = {
        players: [
           { number: null, points: null }
           ]
     }
  }

Я пробовал этот код:

 onAddOneClick = () => {
    this.setState = (state) => {
     ...state, number: this.state.number,
     ...state, points: state.players.points   1
    }

но продолжайте получать ошибку:

Комментарии:

1.Функция со стрелкой, возвращающая объект, нуждается в круглых скобках, () => ({ ... }) , но есть и другие ошибки: ваш второй ...state может number снова переопределить, и вам нужно вызвать setState .

2. Спасибо jonrsharpe:-) круглые скобки решили некоторые из моих проблем, но теперь у меня, похоже, возникли проблемы с этим

Ответ №1:

Чтобы вернуть объект непосредственно из функции со стрелкой, вам нужно заключить фигурные скобки в круглые скобки, например:

 this.setState((state) => ({
 ...state, 
points: state.players.points   1
}))

Обратите внимание, что вам не нужно распространять состояние дважды.
Редактировать: вы также должны передать свою функцию arrow в качестве параметра вызову setState

Комментарии:

1. Спасибо за ваше время и знания 🙂 Два вопроса: 1) Я хочу обновить как число, так и точки. 2) как мне передать функцию arrow в качестве параметра вызову setState?

2. 1) вы можете просто добавить к объекту, возвращаемому функцией стрелки: this.setState((state) => ({ ...state, points: state.players.points 1, number: <new_value> })) помните, что параметр «состояние» функции стрелки представляет предыдущее состояние. 2) Я отредактировал свой ответ, показав его =)

3. конечно, как глупо с моей стороны функция стрелки: setState(() => {})