从 React 状态中销毁数组中的对象的位置答案

【问题标题】：Where to destruct Object within Array from React State从 React 状态中销毁数组中的对象的位置
【发布时间】：2021-02-02 14:23:29
【问题描述】：

在我遇到这个问题之前，我使用了 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 在渲染过程第一次运行之后运行，它将获取默认状态，即空 []。我在解析后收到propper Array，它看起来像这样：

[{ 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" }]

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

下面我将在我的组件中返回这个：

 return (
<section className='prodPageWrapper'>
  <SmallProd
    c={data && data.category}
    t={data && data.title}
    p={data && data.price}
    prodCd='prodPageDesc'
    idTitle={'pdp_title'}
    idDesc={'pdp_desc'}
    idPrize={'pdp_price'}
  />
  <Swiper data={data && data} photos={data && data.photos} />
  <ShowSizes fn={pickSize} r={sizePicked} />
  <AddToBasketMobile />
  <FavButton />
  <PDPDescription />
  <PushableMain />
  {/* <div id='test'>test</div> */}
</section>
);

我如何访问对象以便我可以使用它并传递它并进一步传递它。提前致谢！

【问题讨论】：

您正在访问data.category、data.title等；不能用同样的方式访问data.photos吗？
嗨，是的，但对于所有我都不确定。一旦我输入它，我就会检索数据数组位我得到每个属性的未定义

标签： javascript reactjs object redux react-router-dom

【解决方案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 ... />
    )
}

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

【讨论】：

【解决方案2】：

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

这实际上解决了它。

不过谢谢！

【讨论】：