我正在尝试计算已完成的任务,我相信逻辑应该是正确的,但是似乎this.setState({})
根本没有响应/未达到,它对{中的数据'qtySelected'没有做任何事情{1}},因为this.state({})
在控制台中没有结果。任何人都知道为什么,也许这是一些反应生命周期的问题?
console.log('ts')
答案 0 :(得分:2)
您不会在任何地方调用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>
);
}
}
答案 1 :(得分: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>
答案 2 :(得分:1)
什么都没有执行this.countSelected函数。 因此,请删除该函数或使其成为componentDidMount的外部对象,然后从componentDidMount调用它。