React中useEffect同时修改两个父组件state的异常问题

首先看你代码里的明显错误：按钮的onPress写法不对，直接写Navigation.navigate(secondScreen)会在组件渲染时立刻执行导航，而不是点击按钮时触发，先改成点击回调的形式：

<button onPress={() => Navigation.navigate('secondScreen')} />

（注意这里的路由名称要和你注册的路由一致，是字符串类型）

接下来分析两个页面状态同步的问题，正常情况下两个页面的pictures是各自独立的局部状态，setPictures也是各自的更新函数，不会互相影响，出现这个问题大概率是以下原因之一，对应解决办法：

• API返回数据是引用类型且共享了引用：如果接口返回的是数组/对象这类引用类型，直接赋值给state会导致多个state引用同一个内存对象，后续修改时会互相影响。解决办法是创建新的引用：

  useEffect(() => {
    // 假设api返回的数据是response.data.pictures
    fetch('你的接口地址')
      .then(res => res.json())
      .then(data => {
        // 用展开运算符创建新数组，切断引用
        setPictures([...data.pictures])
      })
  }, [])
  

• 第一个页面未被卸载导致重复触发：如果用的是栈导航，第一个页面会留在后台内存中，若某些场景导致它的Component重新挂载（比如返回再进入），会再次执行useEffect。如果只希望第二个页面加载数据，可以给Component加个标识，只在第二个页面执行数据更新：

  // 第一个页面调用Component时
  <Component 
    pictures={pictures}
    setPictures={setPictures}
    loadData={false}
  />
  
  // 第二个页面调用Component时
  <Component 
    pictures={pictures}
    setPictures={setPictures}
    loadData={true}
  />
  
  // Component组件内
  useEffect(() => {
    if (loadData) {
      // 这里调用接口并更新state
      setPictures(接口返回的数据)
    }
  }, [loadData])
  

• 导航方式导致页面未完全卸载：如果不需要保留第一个页面的状态，可以用replace替换栈页面，这样第一个页面会被卸载，不会再触发任何逻辑：

  <button onPress={() => Navigation.replace('secondScreen')} />
  

内容的提问来源于stack exchange，提问作者user13080475