Блог

Главная - Вопросы по программированию - Изменение состояния ребенка в react

Изменение состояния ребенка в react

#javascript #reactjs #i18next

Вопрос:

 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». Я хочу отобразить » ko «в дочернем файле , установив значение selectedLang » индекс ko App «и указав индекс» ko » и весь массив языков в качестве реквизитов Child .

Тем не менее, Child » s selected и defaultIndex , похоже, не меняется с состояния useState(0) , инициализированного с.

Кто-нибудь может мне помочь?

Ответ №1:

setSelected необходимо вызвать после изменения defaultIndex в Child компоненте.

И ты не воспользовался подходящим крючком.

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

Комментарии:

1. Может быть, это должно быть полезным эффектом?

Ответ №2:

Вы можете использовать контекст react для достижения этой цели: сначала создайте поставщика Lang в app.js

 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

Метки: