React父组件传递props后子组件state未同步更新问题求助

问题原因 #

• 1. Child组件语法误用：你把初始化更新状态的逻辑写在了useState中，useState的入参仅用于定义状态初始值，你传入的回调不会作为副作用执行，自然也不会修改selected的初始值0。
• 2. 初始props时序问题：App组件首次渲染时，selectedLang的初始值是0，useEffect中的赋值逻辑是组件挂载完成后才执行的，后续selectedLang更新为1后，Child没有监听defaultIndex的变化做同步。

解决方案 #

方案1：Child保留内部状态，修正副作用逻辑 #

把错误的useState改成useEffect，同时把defaultIndex加入依赖数组，保证props变化时可以同步更新内部状态：

function Child(props){
  const {defaultIndex, childList} = props;
  const [selected, setSelected] = useState(0);

  // 这里要用useEffect，不是useState，同时加入依赖监听props变化
  useEffect(()=>{
    setSelected(defaultIndex);
  },[defaultIndex])

  return(
    <div>
      {childList[selected]}
    </div>
  )
}

方案2：删除Child冗余内部状态（更推荐） #

如果Child不需要自行修改选中值，完全可以直接使用传入的props，不需要额外维护内部状态，代码更简洁：

function Child(props){
  const {defaultIndex, childList} = props;
  return(
    <div>
      {childList[defaultIndex]}
    </div>
  )
}

App代码优化建议（非必需） #

你当前用map做遍历收集数组的写法不符合规范，map是用来生成新数组的，遍历操作建议用forEach，也可以直接简化赋值：

useEffect(()=>{
  /* 直接赋值即可，不需要手动遍历push */
  const list = i18n.options.supportedLngs;
  const defaultLangIndex = list.findIndex(item => item === i18n.language);
  setSelectedLang(defaultLangIndex);
  setLangList(list);
}, [])

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