状态改变时不调用函数答案

【问题标题】：Function is not called when state is changed状态改变时不调用函数
【发布时间】：2020-07-14 16:19:05
【问题描述】：

我在 react showPeople 中有一个功能。这是代码：

const showPeople = () => {
    const people = workers.map((worker, i) => {
        return (
            <div>
                <Worker
                    id={worker.id}
                    index={i}
                    role={worker.role}
                />
            </div>
        )
    })
    return people;
}

稍后在组件中我想调用这个函数，以便向我显示一些工人的信息。我这样称呼它：

<div>
  {showPeople()}
</div>

这没关系，但它只被调用一次。当我改变状态时，它不会被调用。所以我只有在刷新页面后才有更新。如果我删除通话中的括号，我的屏幕上什么也没有。有谁知道是什么问题？抱歉，如果这个问题是重复的，我不确定我是否理解与他的主题相关的任何先前的答案。谢谢

【问题讨论】：

请分享整个组件，包括你如何改变状态
我想是的。我想也许'workers'数组包括键'id'和'role'。但这只是我的猜测。所以分享 'workers' 数组。
您是否检查过 react-dev-tool 或 redux-dev-tool 以确保您的状态正在更新，以便组件正确重新呈现？
我认为您的代码存在问题的解决方案：stackoverflow.com/questions/48443081/…
请提供minimal reproducible example，以便我们查看您所询问的代码 sn-ps 的上下文。

标签： javascript reactjs redux

【解决方案1】：

编辑你的函数以接受工人作为参数：

const showPeople = (workers) => {
 const people = workers.map((worker, i) => {
    return (
        <div>
            <Worker
                id={worker.id}
                index={i}
                role={worker.role}
            />
        </div>
    )
})
return people;
}

并从州传递工人。

<div>
 {showPeople(this.state.workers)}
</div>

每当您的 this.state.workers 发生变化时，它都应该重新渲染，并且会使用新的 worker 渲染。

【讨论】：

感谢您的回复，但这不起作用。当我调试时，我可以清楚地看到状态已更新，并且采用了工人的新值，但它仍然没有显示在窗口中。我正在像这样从州里带走工人：const { workers } = useSelector((state: AppRootState) => state.people);

【解决方案2】：

正如本文所写，它应该会在 state 更新时更新 (see example here)。除非您保存了数组 workers，例如 const {workers} = this.state 或 const [workers, setWorkers] = useState([{'id': '1', role: 'thisRoleNAme'}])，否则您可能实际上并未访问某个状态。

【讨论】：

我正在访问这样的状态：const { workers } = useSelector((state: AppRootState) => state.people);
是state.people 一个带有worker 键的对象（例如{state: {people: {workers: [...], nonWorkers: [...]}}}）？如果不是，那么workers 将在state.people 更新时未定义且不会更新。我认为目前有太多猜测，我们需要看到更多您的组件。