setState在反應中使用索引更新數組值

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樹中的組件。

注意
更改狀態的唯一方法應該是通過調用Component.setState 。

現在有了新數組，您可以像下面這樣更新組件狀態：

this.setState({ rocket: newRocket })

Answer 2

可以使用Array.prototype.splice()代替更改現有值。

splice()方法通過刪除現有元素和/或添加新元素來更改數組的內容。

 var arr= ['A','B','E','D']; arr.splice(2,1,'C') console.log(arr)//The result will be ['A','B','C','D']; 

 .as-console-wrapper {max-height: 100% !important;top: 0;} 

Stackblitz演示

---

代碼片段

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'Demo using Array.prototype.slice()',
      rocket: ['tesla', 'apple', 'google'],
      link: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice'
    };
  }

  handleChange(index, e) {
    const { rocket } = this.state;
    rocket.splice(index, 1, e.target.value)
    this.setState({ rocket: [...rocket] }, () => {
      //call back function of set state you could check here updated state
      console.log(this.state.rocket)
    });
  }

  render() {
    return (
      <div>
        <b><a target="_blank" href={this.state.link}>{this.state.name}</a></b>
        {
          this.state.rocket.map((val, i) =>
            <p key={i}>
              <input type="text" onChange={(e) => { this.handleChange(i, e) }} value={val} />
            </p>)
        }</div>
    );
  }
}

render(<App />, document.getElementById('root'));