从 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() {

    const [data, setData] = useState([]);    

    useEffect(() => {

       if (localStorage) {

         // parse

       }

       else {

         // fetch

       }

       setData(data)

    })

    if (!data.length) return null; // do not render if empty

    return (

        <section ... />

    )

}

这应该可以防止任何孩子使用您的对象，此外，您还可以返回一个微调器或加载指示器，while!data.length为 true。

Answer 2

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

这实际上解决了它。

不过谢谢！