React：如何从外部函数更新组件状态？

Question

我已经创建了一个通知组件（WIP），当我要实现它以在“真实”场景中对其进行测试时，我意识到我不完全了解我对状态所做的事情（尤其是在状态之外）组件本身）。

本质上，我需要根据我的应用中进行的某些调用的成功/错误设置visible状态以及其他状态。 这些调用是在单独的js文件中进行的，其中this.setState({})不能正常工作 。

我在这里设置了一个示例： https : //codesandbox.io/s/recursing-ives-ktc4w

我简化了代码。 在randomjsfile.js我有一个超时，该超时在2.5秒后显示控制台日志，并且我希望它将组件的visible状态设置为false。 我尝试过的方法不起作用，我认为这是有道理的，因为没有将它们真正联系在一起的东西。 我只是不确定如何实现这一目标。

任何帮助或指导将不胜感激！

Answer 1

您可以将状态保留在某些父组件中，并将其作为道具传递给子组件，或者可以使用Context或Redux 。 如我所见，您的randomjsfile.js与React无关，因此，您可以使用Redux并将数据保留在Redux Store中，将组件连接到此存储，然后在randomjsfile.js调度一个操作，以更新存储。

Answer 2

您不仅可以从任何地方调用this.setState（{}），还可以考虑在这种情况下什么是“ this”。

在randomjsfile.js中，这可能是全局上下文的窗口。 您将在react环境和其他一些组件中调用这些通知，这些通知将根据组件层次结构设置最顶层父组件的状态。

像这样： 如何在React中更新父状态？