我是變異對象嗎？

Question

我正在改變狀態對象嗎

state = {
  selectedHero: { id: "", name: "", saying: "" }
}

用這種方法

handleChange = e => {
  let selectedHero = this.state.selectedHero;
  selectedHero[e.target.name] = e.target.value;

  this.setState({ selectedHero });
};

我應該寫這樣的東西嗎？

handleChange = e => {
  let selectedHero = { ...this.state.selectedHero };
  selectedHero[e.target.name] = e.target.value;

  this.setState({ selectedHero });
};

Answer 1

是的，沒有。 您不是要this.state ，而是要this.state引用的對象。 在React中不應該這樣做。

我應該寫這樣的東西嗎？

差不多 ; 由於這涉及基於狀態（ selectedHero的其他屬性）來更新狀態，因此必須使用setState的回調版本 。 由於這意味着在handleChange返回后使用合成事件中的屬性，因此我們需要handleChange獲取它們：

handleChange = e => {
  const {name, value } = e.target;
  this.setState(prevState => {
    let selectedHero = { ...prevState.selectedHero };
    selectedHero[name] = value;
    return { selectedHero };
  })
};

如果您不使用回調版本，則大多數情況下似乎會正常工作，並且在對selectedHero進行重疊的狀態更新時會失敗（請記住狀態更新是異步的）； 一個會腳另一個。

---

如果您願意，還可以通過在屬性分布后使用計算的屬性名稱來壓縮它：

handleChange = e => {
  const {name, value} = e.target;
  this.setState(prevState => ({selectedHero: {...prevState.selectedHero, [name]: value}}));
};

甚至拋出一些參數解構：

handleChange = ({target: {name, value}}) => {
  this.setState(prevState => ({selectedHero: {...prevState.selectedHero, [name]: value}}));
};

（是的，解構將在handleChange返回之前發生。它發生在handleChange的顯式代碼handleChange運行之前。）

Answer 2

是的，您正在變異selectedHero對象。 您應該執行以下操作：

handleChange = e => {
  let selectedHero = Object.assign({}, this.state.selectedHero);
  selectedHero[e.target.name] = e.target.value;
  this.setState({ selectedHero });
};

Object.assign調用將創建一個新對象，這樣就不會修改您原來的selectedHero對象。

編輯：您對ES2018傳播語法的編輯使用也可以使用。