反应未达到setState函数，因此无法正常工作

问题描述

我正在尝试计算已完成的任务，我相信逻辑应该是正确的，但是似乎this.setState({})根本没有响应/未达到，它对{中的数据'qtySelected'没有做任何事情{1}}，因为this.state({})在控制台中没有结果。任何人都知道为什么，也许这是一些反应生命周期的问题？

console.log('ts')

解决方法

您不会在任何地方调用this.countSelected函数。无论哪种方式，您都不能直接从当前状态计算得出的数据存储在该状态中。

export class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tasks: [
        // ...
      ],};
  }

  render() {
    const selectedCount = this.state.tasks.filter((task) => task.completed).length;
    return (
      <div>
        <table>
          <tfoot>
            <tr>
              <td style={{ whiteSpace: "nowrap" }}>{selectedCount} selected</td>
            </tr>
          </tfoot>
        </table>
      </div>
    );
  }
}

,

您实际上并没有在componentDidMount中运行任何内容-您只是在定义新功能this.countSelected。

在使用前一个状态值更新状态时，也使用setState的回调版本是best practise。

---

一起，您可以将其用作新的componentDidMount，它应该可以按预期工作：

componentDidMount() {    
    this.setState(state => ({
        qtySelected: state.tasks.filter(task => task.completed).length
    }))
}

---

或者，您可能应该直接使用此计算值，而不是强制第二次重新渲染，因为它实际上并不需要是单独的状态变量。

<td style={{ whiteSpace: "nowrap" }}>
  {this.state.tasks.filter(task => task.completed).length} selected
</td>

,

什么都没有执行this.countSelected函数。 因此，请删除该函数或使其成为componentDidMount的外部对象，然后从componentDidMount调用它。