如果当前屏幕发生更新，则更新父屏幕的状态

Question

我正在使用 react-navigation 6 和 react-native CLI 制作聊天应用程序。我想实现这个在每个聊天应用程序中都很常见的功能，当我们 向某人发送消息 ，然后返回应用程序的主屏幕 （所有对话被列出），最后发送的消息，可以看到。

就像我发送消息并按下后退按钮一样，它会将我导航到我所有对话所在的主屏幕，并且它应该更新我发送消息的对话。

我试过route.params，但它给出了一个警告non-serializable values found。

React navigation warning

此外，我听说将 setState 函数传递给子组件是非常糟糕的做法，因为它被提到

我还尝试了 navigation_events 和 useEffect ，令我惊讶的是它也不起作用。当我手动刷新屏幕，或注销并登录时，它会完全刷新，但当我从应用程序返回时不会。

React.useEffect(() => {
    navigation.addListener('focus', e => {
      fetchConvos();
    });
    return () => {};
  }, []); //also tried [navigation] instead of []

const fetchConvos = () => {
    fetch('http://localhost:15000/' + id + '/conversations', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
      redirect: 'follow',
      referrerPolicy: 'no-referrer',
    })
      .then(res => res.json())
      .then(received => {
        if (received?.response !== false) {
          setConversations(received);
        }
      });
  };

我检查了 id 、received 甚至 setConversations，它们都在更新，但我的屏幕仍然显示旧消息。

此外，我不想使用 Async Storage 或 redux 来解决像这样的简单问题。

如果这还不够，我可以分享完整代码。

编辑我想出另一种更新方法可能有助于进一步澄清情况。

React.useEffect(() => {
    navigation.addListener('focus', e => {
      setConversations([]); //first setting convos to empty
      fetchConvos(); //then fetching new data
    });
    return () => {};
  }, []);

但是这个方法很慢，因为我要更新两次对话状态。

如果有人能在这里帮助我，我将不胜感激。

Answer 1

通过获取最后 2 个代码示例，我将沿着设置状态的路线走下去以更改数据。就像，我不完全了解您的代码结构。但我假设您在某些组件中使用 useEffect，对吗？在那种情况下，React Context 可能就是你要找的：

它允许共享信息，而无需构建像 redux 这样的结构化存储。您可能应该重新设计一些代码，因为如果您遵循当前逻辑，您将在菜单中拆分对话的数据池并在“后退”导航事件发生时加载它们，对吗？同时对话数据应该共享并可供两个组件使用，无论您身在何处。至少我会重新考虑这种方式，以允许整个应用程序中的数据一致。当然，除非你必须在现场做一些具体的事情。

如果当前屏幕发生更新，则更新父屏幕的状态

update state of the parent screen if an update occurs in current screen

reactjs

react-native

react-navigation

react-hooks