javascript - setState在 react 中使用索引更新数组值

Question

我想使用索引更新数组值，下面的代码可以吗？

handleChange = index => e => {
  const { rocket } = this.state // ['tesla', 'apple', 'google']
  rocket[index] = e.target.value
  this.setState({ rocket })
}

我的 jsx

<div>{rocket.map((val,i) => <input type="text" onChange={handleChange(i)} value={val} />)}</div>

我知道它有效，但只是为了确保像这样改变状态是可以的。

Answer 1

以这种方式改变状态是不行的。

以下行以一种可能导致程序错误的方式改变当前状态下的数组，特别是对于使用该状态的组件树下的组件。
这是因为状态仍然是同一个数组。

rocket[index] = e.target.value
//console.log(this.state.rocket) and you see that state is updated in place

始终将状态视为不可变

您可以通过编写来解决这个问题。

const newRocket = [
  ...rocket.slice(0, index),
  e.target.value, 
  ...rocket.slice(index + 1)
]

这样，当 React 执行 reconciliation 时，将创建一个新数组并更新组件树中的组件。 .

注意
改变状态的唯一方法应该是通过调用 Component.setState。

现在您有了一个新数组，您可以像这样更新组件状态:

this.setState({ rocket: newRocket })