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 进行协调时，就会创建一个新数组，并且可以更新组件树中的组件。

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

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

this.setState({ rocket: newRocket })