在React中反向填充陣列

我試圖用幾個物件陣列填充一個陣列，但在第一次渲染時，這些值在陣列內部被反向填充，重繪 后它們又回到它們應該的樣子。

  const getProducts = async (data) => {
    await productServices
      .getProductsByTakeoffWizardStep(data)
      .then((response) => {
        setRows((rows) => [...rows, response.data]);
      })
      .catch((error) => {
        console.log(error.response);
      });
  };

  const getTakeoffIDs = () => {
    var i = 1;
    takeoffServices
      .getTakeoffSteps(5)
      .then((response) => {

        response.data.forEach((element) => {
          setSteps((steps) => [...steps, element.description]);
          setStepsID((stepsID) => [...stepsID, element.stepID]);
          var data = { StepID: element.stepID, TakeoffID: 4 };
          getProducts(data);
          setStepSequence((stepSequence) => [
            ...stepSequence,
            "Step "   i   "",
          ]);
          i = i   1;
        });
      })
      .catch((error) => {
        console.log(error.response);
      });
  };

  useEffect(() => {
    setSteps([]);
    setStepsID([]);
    setRows([]);
    getTakeoffIDs();
  }, []);

所以在第一次渲染時，陣列看起來像這樣

(2) [Array(1), Array(2)]
0: Array(1)
0: {product: {…}, quantity: null}
length: 1
[[Prototype]]: Array(0)
1: Array(2)
0: {product: {…}, quantity: null}
1: {product: {…}, quantity: null}
length: 2
[[Prototype]]: Array(0)
length: 2
[[Prototype]]: Array(0)

重繪 頁面后，它看起來像這樣

(2) [Array(2), Array(1)]
0: Array(2)
0: {product: {…}, quantity: null}
1: {product: {…}, quantity: null}
length: 2
[[Prototype]]: Array(0)
1: Array(1)
0: {product: {…}, quantity: null}
length: 1
[[Prototype]]: Array(0)
length: 2
[[Prototype]]: Array(0)

什么可能導致這種情況，我可以做些什么來解決它？

我正在使用 history.push() 從另一個頁面訪問該頁面，但我傳遞的任何狀態都不會影響獲取程序，僅顯示與我正在獲取的資料無關的某些段落。

uj5u.com熱心網友回復：

這就是我要寫的：

const getProduct = async (data) => {
  try {
    const response = await productServices.getProductsByTakeoffWizardStep(data);
    return response.data;
  } catch (error) {
    console.log(error.response);
  }
}

const getTakeoffIDs = () => {
  takeoffServices
    .getTakeoffSteps(5)
    .then(async (response) => {

      // try moving setSteps(), setStepsID() and setStepSequence() up here, so they don't wait for the products.

      const products = await Promise.all(
        response.data.map(element => getProduct({
          StepID: element.stepID,
          TakeoffID: 4
        }))
      );

      setRows((rows) => [
        ...rows,
        ...products
      ]);
      setSteps((steps) => [
        ...steps,
        ...response.data.map(element => element.description)
      ]);
      setStepsID((stepsID) => [
        ...stepsID,
        ...response.data.map(element => element.stepID)
      ]);
      setStepSequence((stepSequence) => [
        ...stepSequence,
        ...response.data((_, i) => `Step ${i   1}`)
      ]);
    })
    .catch((error) => {
      console.log(error.response);
    });
};


useEffect(() => {
  setSteps([]);
  setStepsID([]);
  setRows([]);
  getTakeoffIDs();
}, []);

• setState()我沒有多次呼叫所有這些Array.map()資料，而是一次性添加所有資料。
• await對于所有的getProduct()呼叫完成，立刻也把他們; 為了。

我不確定的一件事是，您是否希望將setRows()與另一個 setter 一起呼叫，或者其他 setter 是否setRows()應該先呼叫（因為資料可用）并且應該稍后呼叫，只要資料是可用的。

標籤：javascript 数组 反应 使用状态

上一篇：嘗試將句子拆分為陣列陣列時不斷出現段錯誤

下一篇：如何在JavaScript中過濾和映射陣列