未达到 React setState 功能，因此无法正常工作

Question

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

export class Main extends Component {
    constructor(pros) {
        super(pros)
        this.state = {
            tasks: [
                {
                    id: 1,
                    content: "Sara's doctor and vaccine",
                    due: '2020-08-29',
                    completed: false
                },
                {
                    id: 2,
                    content: "Trash bags / facial masks / child allowance",
                    due: '2020-08-28',
                    completed: false
                },
                {
                    id: 3,
                    content: "Apply for Portugal nationality",
                    due: '2020-09-31',
                    completed: false
                },
                {
                    id: 4,
                    content: "My registeration card",
                    due: '2020-09-28',
                    completed: false
                },
                {
                    id: 5,
                    content: "contact ADEM",
                    due: '2020-12-31',
                    completed: false
                },
                {
                    id: 6,
                    content: "Pay loan",
                    due: '2020-09-03',
                    completed: true
                }
            ],
            qtySelected: 0
        }

    }


    componentDidMount() {    
        this.countSelected = () => {
            console.log('ts')
            let tasksCompleted = this.state.tasks.filter(task => {
                return task.completed === true
            })
            this.setState({
                qtySelected: tasksCompleted.length
            })
        }    
    }

    render() {
        return (
            <div>
                <table>
                    <tfoot>
                        <tr>
                            <td style={{ whiteSpace: "nowrap" }}>{this.state.qtySelected} selected</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        )
    }
}

Answer 1

您没有在任何地方调用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>
    );
  }
}

Answer 2

您实际上并没有在 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>

Answer 3

没有执行 this.countSelected 函数。 所以删除该函数或使其外部到 componentDidMount 并从 componentDidMount 调用它。