从其他组件更改状态（不通过 setState 函数）

Posted 2023-02-23

【中文标题】从其他组件更改状态（不通过 setState 函数）

【英文标题】：Change state from other component (without passing setState function)

【发布时间】：2021-02-05 12:22:54

【问题描述】：

我在 android 方面有相当不错的背景，但现在我开始深入研究 react native，我对通过钩子和设置状态函数更改组件状态的方法感到非常困惑。

简而言之，我有我的主屏幕，我有许多改变可见性的小组件。这是通过让用户在对话框中更改一些过滤器设置来完成的。因此，建议的方法是在我的主屏幕中设置一个挂钩，其中包含一个包含每个组件可见性值的列表。但是由于我从模态框内部更改组件的可见性，因此每次我想显示模态框时，我都必须传入不同的函数（例如 setComponentEnable 或 setComponentDisabled）来设置每个组件的状态。所以我的主屏幕会被所有这些小功能污染。另外我不应该忘记提到我的模态由许多较小的组件组​​成，我必须尽可能深入地传递正确的功能以匹配用户操作。 所以我的问题是，有没有办法做到这一点，而不会用所有这些小功能污染我的主屏幕，并且每次用户更改模式中的过滤器时主屏幕都可以更新？

我已经阅读了上下文，但文档说：

上下文旨在共享可被视为 React 组件树“全局”的数据，例如当前经过身份验证的用户、主题或首选语言。

所以我认为这不应该是上下文使用的好案例。 我现在要做的是创建一个带有列表的钩子

const [isibility, setVisibility] = useState([]);

创建可见性处理函数

const setVisibilityEnable = () => 
   ...

并将其传递给我的模态。

<MyModal 
     visibilityHandler=setVisibilityEnable/>

有没有办法在不将所有这些回调传递给模态的情况下操纵状态？或者有没有人可以提出一个更好、更干净的解决方案来避免最终拥有一个非常大的主屏幕？

【参考方案1】：

您可以将所有设置包含在一个对象中，并将该对象传递给所有组件。然后每个组件将相应地修改该对象。

const defaultVisibility = 
                            childComponentOne: true,
                            childComponentTwo: true,  
                          ;
const [visibilityObject, setVisibilityObject] = useState(defaultVisibility);

将函数和对象都传递给您的子组件：

<ChildComponentOne visibilityObject=visibilityObject setVisibilityObject=setVisibilityObject />

然后在您的子组件中，您可以像这样设置可见性：

setVisibilityObject(...visibilityObject, childComponentOne: false);

【讨论】：

这与我现在使用的方法完全相同，唯一的区别是您使用对象而不是数组。但是问题仍然存在，因为如果有几个额外的条件我还需要检查用户何时更改可见性，那么我需要编写几个小函数并将它们传递到模态中。

也许给我们更多的代码，看看这种方法究竟是如何污染你的主要组件的？

【参考方案2】：

为什么您不只是将属性传递给您的模态并检查oncomponentdidchange 方法中是否发生了更改？

componentDidUpdate(prevProps) 
    if (this.props.yourPoperty!== prevProps.yourPoperty) 
       //do your visibility stuff
    

或者，当您将组件连接到商店时，您可以使用 redux 来完成。

【讨论】：

我想要管理其可见性的组件位于父组件中，但可见性更改发生在模态中。这将如何运作？顺便说一句，我使用函数式编程，但我猜使用效果可以做与 componentdidupdate 相同的工作......

不是同一个工作，componentDidUpdate 只在使用类语法时调用一次，useEffect 在三种不同的场合调用：componentDidMount、componentDidUpdate 和 componentWillUnmount。您可以存储以前的道具，并在新道具到达时将它们与新道具进行比较，并设置道具更改的可见性。更多关于差异的信息：linguinecode.com/post/react-componentdidupdate-vs-useeffect