заполнить несколько раскрывающихся данных, используя useEffect - PullRequest
Новая
       21

заполнить несколько раскрывающихся данных, используя useEffect

1 голос
/ 21 октября 2019

Вот как я пытаюсь заполнить два раскрывающихся списка в моем компоненте, используя useEffects. 

function populate_dropdown_one_data() {
    return axios.get("http://127.0.0.1:5001/dropdownonedata");
}

function populate_dropdown_two_data() {
    return axios.get("http://127.0.0.1:5000/dropdowntwodata");
}

React.useEffect(() => {
    populate_dropdown_one_data()
      .then(result => {
        setDropDownOneData(result.data.data);
      });
  }, []);

React.useEffect(() => {
    populate_dropdown_two_data()
      .then(result => {
        setDropDownTwoData(result.data.data);
      });
  }, []);

Это вызывает populate_dropdown_one_data только при загрузке страницы.

Если я объединяюpopulate_dropdown_one_data и populate_dropdown_two_data внутри одного useEffect, он вызывает только populate_dropdown_two_data.

Как заполнить данные для обоих раскрывающихся списков при загрузке страницы?

Ответы [ 2 ]

1 голос
/ 21 октября 2019

Обновление состояния не пакетируется для асинхронных операций .

Вы можете await для обеих операций в одном эффекте. 

React.useEffect(
  () => {
    const fetchData = async () => {
      const one = await populate_dropdown_one_data();
      const two = await populate_dropdown_two_data();

      setDropDownOneData(one.data.data);
      setDropDownTwoData(two.data.data);
    };

    fetchData();
  },
  []
);
0 голосов
/ 21 октября 2019 
React.useEffect(() => {
 async function load() {
  const [dropdown1, dropdown2] = await Promise.all([
    populate_dropdown_one_data(),
    populate_dropdown_two_data()
  ])
  setDropDownOneData(dropdown1.data.data);
  setDropDownTwoData(dropdown2.data.data);
 }

 load();
}, [])
...