如何在 React 中不丢失数组的值？

Question

我需要在 React 上挂载动态 'select'，但我遇到了问题。

我正在执行 'for' 来调用 API，但是在执行 'for' 时，我丢失了之前的值。

如何维护这些值？

我尝试这样做，但它产生了一个无限循环：

const Form = (props) => {
  const [makes, setMakes] = useState([]);
  const [models, setModels] = useState([]);

  useEffect(() => {
    api.get("Make").then((response) => {
      setMakes([...response.data]);
    });
  }, []);

  async function handleModels() {
    for (let i = 0; i < makes.length; i++) {
      const response = await api.get(`Model?MakeID=${makes[i]["ID"]}`);
      const model = response.data;
      setModels([...models, model]);
    }
  }

  if (makes.length) {
    handleModels();
  }

谢谢！

Answer 1

您需要传递一个接受当前状态的函数：

setModels((models)=> [...models, model]);

或者更好的是，将结果推送到一个数组，然后只更新一次状态：

async function handleModels() {
  let allModels = []
  for (let i = 0; i < makes.length; i++) {
    const response = await api.get(`Model?MakeID=${makes[i]["ID"]}`);
    const model = response.data;
    allModels.push(model);
  }
  setModels(allModels);
}

查看工作示例： https://codesandbox.io/s/happy-sunset-nv3oc?file=/src/App.js

如何在 React 中不丢失数组的值？

How not to lose the values of an array in React?

javascript

select

infinite-loop

reactjs

如何在 React 中不丢失数组的值？

How not to lose the values ​of an array in React?

javascript

select

infinite-loop

reactjs

How not to lose the values of an array in React?