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一次执行两项操作。

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

Answer 2

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

使用useEffect填充多个下拉数据

2 个答案: