forEach 里面的 forEach 使用状态

Question

我遇到了 useEffect 钩子的问题，显然，它没有按照以前的方式呈现，因为我的 cardArticle 没有正确记录，它只连接了 las 数组，仅此而已。代码如下：

  const [articles, setArticles] = useState([]);
  const [cardArticle, setCardArticle] = useState([]);

  useEffect(() => {
    setArticulos(shopArticles);
  }, []);

  useEffect(() => {
    articles.forEach((article) => {
      var objects = article[0][`${Object.keys(article[0])}`];
      objects.forEach((object) => {
        setCardArticle([...cardArticle, object]);
      });
    });
  }, [articles]);

这是来自 shopArticles 的 json：

[
  [
    {
      "Pantalones": [
        {
          "id": "pantalon1",
          "imagen": "https://www.newbalance.com.ar/media/catalog/product/cache/4/image/9df78eab33525d08d6e5fb8d27136e95/p/a/pantalon-mujer-new-balance-essentials-ft-sweatpant-wp83552ag_nb_40_i.jpg",
          "precio": 1250,
          "stock": 3
        },
        {
          "id": "pantalon2",
          "imagen": "https://www.newbalance.com.ar/media/catalog/product/cache/4/image/9df78eab33525d08d6e5fb8d27136e95/p/a/pantalon-mujer-new-balance-essentials-ft-sweatpant-wp83552ag_nb_40_i.jpg",
          "precio": 1250,
          "stock": 1
        },
        {
          "id": "pantalon3",
          "imagen": "https://www.newbalance.com.ar/media/catalog/product/cache/4/image/9df78eab33525d08d6e5fb8d27136e95/p/a/pantalon-mujer-new-balance-essentials-ft-sweatpant-wp83552ag_nb_40_i.jpg",
          "precio": 1250,
          "stock": 5
        },
        {
          "id": "pantalon4",
          "imagen": "https://www.newbalance.com.ar/media/catalog/product/cache/4/image/9df78eab33525d08d6e5fb8d27136e95/p/a/pantalon-mujer-new-balance-essentials-ft-sweatpant-wp83552ag_nb_40_i.jpg",
          "precio": 1250,
          "stock": 2
        },
        {
          "id": "pantalon5",
          "imagen": "https://www.newbalance.com.ar/media/catalog/product/cache/4/image/9df78eab33525d08d6e5fb8d27136e95/p/a/pantalon-mujer-new-balance-essentials-ft-sweatpant-wp83552ag_nb_40_i.jpg",
          "precio": 1250,
          "stock": 3
        },
        {
          "id": "pantalon6",
          "imagen": "https://www.newbalance.com.ar/media/catalog/product/cache/4/image/9df78eab33525d08d6e5fb8d27136e95/p/a/pantalon-mujer-new-balance-essentials-ft-sweatpant-wp83552ag_nb_40_i.jpg",
          "precio": 1250,
          "stock": 0
        }
      ]
    }
  ],
  [
    {
      "Remeras": [
        {
          "id": "remera1",
          "imagen": "https://www.newbalance.com.ar/media/catalog/product/cache/4/image/9df78eab33525d08d6e5fb8d27136e95/p/a/pantalon-mujer-new-balance-essentials-ft-sweatpant-wp83552ag_nb_40_i.jpg",
          "precio": 1250,
          "stock": 3
        },
        {
          "id": "remera2",
          "imagen": "https://www.newbalance.com.ar/media/catalog/product/cache/4/image/9df78eab33525d08d6e5fb8d27136e95/p/a/pantalon-mujer-new-balance-essentials-ft-sweatpant-wp83552ag_nb_40_i.jpg",
          "precio": 1250,
          "stock": 1
        },
        {
          "id": "remera3",
          "imagen": "https://www.newbalance.com.ar/media/catalog/product/cache/4/image/9df78eab33525d08d6e5fb8d27136e95/p/a/pantalon-mujer-new-balance-essentials-ft-sweatpant-wp83552ag_nb_40_i.jpg",
          "precio": 1250,
          "stock": 5
        },
        {
          "id": "remera4",
          "imagen": "https://www.newbalance.com.ar/media/catalog/product/cache/4/image/9df78eab33525d08d6e5fb8d27136e95/p/a/pantalon-mujer-new-balance-essentials-ft-sweatpant-wp83552ag_nb_40_i.jpg",
          "precio": 1250,
          "stock": 2
        },
        {
          "id": "remera5",
          "imagen": "https://www.newbalance.com.ar/media/catalog/product/cache/4/image/9df78eab33525d08d6e5fb8d27136e95/p/a/pantalon-mujer-new-balance-essentials-ft-sweatpant-wp83552ag_nb_40_i.jpg",
          "precio": 1250,
          "stock": 3
        }
      ]
    }
  ],
  [
    {
      "Calzado": [
        {
          "id": "calzado1",
          "imagen": "https://www.newbalance.com.ar/media/catalog/product/cache/4/image/9df78eab33525d08d6e5fb8d27136e95/p/a/pantalon-mujer-new-balance-essentials-ft-sweatpant-wp83552ag_nb_40_i.jpg",
          "precio": 1250,
          "stock": 3
        }
      ]
    }
  ],
  [
    {
      "Vestido": [
        {
          "id": "vestido1",
          "imagen": "https://www.newbalance.com.ar/media/catalog/product/cache/4/image/9df78eab33525d08d6e5fb8d27136e95/p/a/pantalon-mujer-new-balance-essentials-ft-sweatpant-wp83552ag_nb_40_i.jpg",
          "precio": 1250,
          "stock": 3
        },
        {
          "id": "vestido2",
          "imagen": "https://www.newbalance.com.ar/media/catalog/product/cache/4/image/9df78eab33525d08d6e5fb8d27136e95/p/a/pantalon-mujer-new-balance-essentials-ft-sweatpant-wp83552ag_nb_40_i.jpg",
          "precio": 1250,
          "stock": 3
        }
      ]
    }
  ]
]

如果有机会改进我的代码，请告诉我，我不知道还能做什么。

Answer 1

从 useState (setCardArticle) 调用 setter 以实际已知状态启动组件的刷新（在 forEach 完成之前）

你应该替换

objects.forEach((object) => {
  setCardArticle([...cardArticle, object]);
});

通过

setCardArticle([...cardArticle, ...articles.map(article=>article[0][`${Object.keys(article[0])}`])]);