从 React State 的哪里销毁数组中的对象

Question

在我遇到这个问题之前我使用了 redux，这个问题没有发生。现在我改变了我的方法，我遇到了这个问题。

在我的主页上，我决定获取我需要的数据并将其存储在 sessionStorage 中，然后当用户单击产品时，它会被重定向到一个模板，我只想在其中填写值。

每当我输入像 data.title 这样的对象时，我就会得到未定义（我知道它是因为 useEffect 在渲染周期之后运行）。我应该如何在这里进行？

我要么从 sessionStorage 中选择值，要么获取它，请参阅我的 useEffect 代码：

 useEffect(() => {

try {

  if (

    sessionStorage.length > 0 &&

    sessionStorage.getItem(title).length > 0

  ) {

    

    const nData = JSON.parse(sessionStorage.getItem(title));

    const fData = filterProd(nData, id);

    setData(() => fData);

  } else {

    fetchFiles(`http://localhost:3000/api/prods?id=${id}`, setData);

  }

} catch (error) {

  history.push('/');

}

 }, []);

这种方法没有问题，当我想使用解析的数组/对象并销毁它时，问题就开始了。因为 useEffect 在第一次运行渲染过程之后运行，所以它会选择默认状态，即空 []。解析后我收到了正确的数组，它看起来像这样：

[{ artcategory: "jacket" brand: "The North Face" category: "men" description: "Outdoorjacke" details: "Unterlegter Reißverschluss, Abdeckleiste, Zwei-Wege-Reißverschluss, Stickerei" folder: "newFall2020" id: "b77a14f0-fd25-11ea-95f1-ff14921ff326" photos: (3) ["/newFall2020/b7164a10-fd25-11ea-95f1-ff14921ff326-ja1.png", "/newFall2020/b71845e0-fd25-11ea-95f1-ff14921ff326-ja2.png", "/newFall2020/b77a14f0-fd25-11ea-95f1-ff14921ff326-ja3.png"] price: 291.95 rating: 0 size: (5) ["XS", "S", "M", "L", "XL"] subcategory: "clothing" title: "ZANECK JACKET UTILITY" }]

在这个对象中，我有一个额外的数组，我在其中存储图像的路径。

Answer 1

如果我理解正确，您的问题是关于尝试使用尚未定义的对象。如果是这种情况，我的建议是：function MyComponent() {&nbsp; &nbsp; const [data, setData] = useState([]);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; useEffect(() => {&nbsp; &nbsp; &nbsp; &nbsp;if (localStorage) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// parse&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// fetch&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;setData(data)&nbsp; &nbsp; })&nbsp; &nbsp; if (!data.length) return null; // do not render if empty&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <section ... />&nbsp; &nbsp; )}这应该可以防止任何孩子使用您的对象，此外，您还可以返回一个微调器或加载指示器，while!data.length为 true。

Answer 2

首先感谢您的建议。我发现了错误，首先它是一个数组，我像输入对象一样输入它，所以数据。但我应该做这个数据[0]。这实际上解决了它。不过谢谢！