React - 組件未更新

Question

我正在使用react創建一個簡單的待辦事項應用程序。 我有組件標題，添加任務和上市任務。 我的標題組件接受一個道具來顯示任務數組中的項目數。 當我添加項目時，標題中的數字不會更新。 我在下面附上了我的代碼

//App.js
export default class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {list:[]}
    this.addItem = this.addItem.bind(this)
  }

  addItem(val) {
    this.state.list.push(val);
    this.setState = {list:this.state.list};
    console.log(this.state.list);
    console.log(this.state.list.length)
  }
  
  render(){
    return (
    <div className="App">
      <Title itemCount={this.state.list.length}></Title>
      <Add addItem={this.addItem}></Add>
      <Items items={this.state.list}></Items>
    </div>
  );
  }
  
}

//Title.js
const Title = (props) => {
    return(
        <div>
            <h1>Todo - {props.itemCount} items</h1>
        </div>
    );
}

我能做些什么來解決這個問題？ 提前致謝！

Answer 1

不要在 React 中改變 state - 你的push改變list 。 在協調時，由於 React 看到舊狀態與新狀態相同（狀態中的數組相同），因此不會發生重新渲染。

相反，使用：

addItem(val) {
  this.setState({
    list: [...this.state.list, val]
  })
}

Answer 2

這不是更新狀態的正確方法。

addItem(val) {
    let updated = [...this.state.list, val];
    this.setState({ list: updated })
  }

為什么不直接修改 React 狀態

直接改變狀態會導致奇怪的錯誤和難以優化的組件。