在 React 中更改 child 的状态

Question

function App(){
  const [selectedLang, setSelectedLang] = useState(0);
  const [langList, setLangList] = useState([]);
  useEffect(()=>{
    const list = [];
    /* i18n.options.supportedLngs is ['en', 'ko'] */
    i18n.options.supportedLngs.map((item, i)=>{
      list.push(item);
      /* Set selectedLang to i18n's default language.(Default is 'ko')*/
      if(item === i18n.language){
        setSelectedLang(i);
      }
    })
    setLangList(list);
  }, [])
  useEffect(()=>{
    console.debug("langList :", langList, ",", selectedLang); // <- It print correctly ['en', 'ko'], 1
  }, [langList, selectedLang])
  return(
    <Child defaultIndex={selectedLang} childList={langList}/>
  )
}


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

  useState(()=>{
    setSelected(defaultIndex);
  },[])
  return(
    <div>
      {childList[selected]} //<- But it print 'en'.
    </div>
  )

}

上面的代码是我的代码的简化版本。

目前 i18n 默认为 'ko'。我想在 Child 中显示 'ko'，方法是将 selectedLang 设置为 App 中的 'ko's 索引，并给出 'ko' 的索引和整个语言数组作为 Child.

的道具

然而，Child 的 selected 和 defaultIndex 似乎并没有从 useState(0) 初始化的状态改变。

有人可以帮助我吗？

Answer 1

setSelected需要在Child组件中更改defaultIndex后调用。

而且你没有使用正确的钩子。

  useEffect(()=>{
    setSelected(defaultIndex);
  },[defaultIndex])

Answer 2

您可以使用 React 上下文来实现此目的：首先在app.js

中制作一个Lang provider

const LangContext = React.createContext('ko');

function App() {
  const [lang, setLang] = useState("ko");
  return (
    <LangContext.Provider value={[lang, setLang]}>
      <Toolbar />
    </LangContext.Provider>
  );
}

然后在任何子组件中你可以使用：

function Button() {
  const [lang, setLang]= useContext(LangContext);
  return (
    <button onClick={()=>{setLang('en')}}>
      {lang}
    </button>
  );
}

上下文中的任何更改都将在使用 useContext 的所有组件中传播。

在此处阅读更多内容：https://reactjs.org/docs/hooks-reference.html#usecontext

在 React 中更改 child 的状态

Change child's state in react

javascript

i18next

reactjs