javascript - 使用 useEffect 填充多个下拉数据

Question

这就是我尝试使用 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。

如何在页面加载时为两个下拉菜单填充数据？

Answer 1

State update is not batched for asynchronous operations .

您可以await 一个effect 中的两个操作。

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();
  },
  []
);