ReactsetState：無法更新狀態物件-有解無憂

我很難理解為什么在這種情況下 setState 無法更新狀態物件。下面是我的問題的一個簡單示例。

class Temp extends Component<TempProps, TempState> {
  constructor(props: TempProps) {
    super(props);
    this.state = { 1: "apple", 2: "banana", 3: "pineapple" };
  }
 
  onBtnClick = () => {
    this.setState(
      (prevState) => {
        const newState = { ...prevState };
        delete newState["2"];
        console.log(newState); //{ 1: "apple", 3: "pineapple" }
        console.log(newState === prevState); //false
        return newState;
      },
      () => {
        console.log(this.state); //{ 1: "apple", 2: "banana", 3: "pineapple" }
      }
    );
  };
  render() {
    return (
      <button onClick={this.onBtnClick}>click me</button>
    );
  }
}
export default Temp;

為什么 onBtnClick() 中的 setState() 無法更新狀態物件，即使 prevState===newState 為假？我很困惑...非常感謝您的評論！

uj5u.com熱心網友回復：

問題是this.setState()執行當前狀態和提供的值的合并。以至于新的狀態是這樣的newState = { ...oldState, ...suppliedValue }。這意味著新引數中省略的任何屬性都將保持不變。這就是為什么您可以呼叫setState({ b: 22 })當前擁有的狀態，{ a: 11, b: 12 }而新狀態將是提供的值和舊值的合并：{a: 11, b: 22}. 您省略了屬性的事實：提供的值中的 a 不會將其從最終狀態中洗掉。

所以我知道的唯一解決方法是：

為要洗掉的屬性分配一個空值，例如null或undefined。這很丑陋，但可能會滿足您的需求。例如，this.setState(prevState => ({ ...prevState, b: undefined }))
不要將應用程式的狀態直接分配給 this.setState，而是分配給嵌套屬性。就像是：

. . .
constructor(props: TempProps) {
    super(props);
    this.state = { appState: { 1: "apple", 2: "banana", 3: "pineapple" } };
  }

. . .

onBtnClick = () => {
    this.setState(
      (prevState) => {
        const newState = { ...(prevState.appState) };
        delete newState["2"];
        console.log(newState); //{ 1: "apple", 3: "pineapple" }
        console.log(newState === prevState); //false
        return { appState: newState };
      },
      () => {
        console.log(this.state); //{ 1: "apple", 3: "pineapple" }
      }
    );
  };
. . .

uj5u.com熱心網友回復：

您可以像這樣比較兩個物件。

JSON.stringify(Object A) === JSON.stringify(Object B)

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/416963.html

標籤：

上一篇：如何修復Bootstrap中的z-index問題？

下一篇：Tween.js沒有正確鏈接