使用 setState 将空数组设置为对象属性时出错（反应 Hooks）答案

【问题标题】：Error when using setState to set an empty array to object property ( react Hooks)使用 setState 将空数组设置为对象属性时出错（反应 Hooks）
【发布时间】：2021-08-25 11:51:09
【问题描述】：

我对这条线有问题：

useEffect(() => {
  if (AplicationsList) {
    setDetail({ ...Detail, components: AplicationsList });
  }
}, [AplicationsList]);

当 AplicationsList 它是一个空数组 [] 时，它会给我一个错误，例如 Detail 未定义。但是当它不为空时工作正常...... 无论数组是否为空，我都必须在 Detail 的 components 属性上设置值。知道为什么会这样吗？

这是我在子组件中面临的错误，它依赖于作为道具传递的“详细信息”：cannot read property map of undefined

我收到了这个反应警告： can't perform a react state update in an unmounted component

我已经尝试过这个功能更新，但仍然给我同样的错误：设置详细信息（详细信息 =>（{ ...细节，组件：应用程序列表， }));

【问题讨论】：

如果新状态是使用前一个状态计算的，React recommends using a functional update（您将函数传递给 setter）。您是否尝试过使用此变体？ setDetail((detail) => ({ ...detail, components: applicationsList }))您能否将您面临的确切错误（包括堆栈跟踪）添加到问题中？
脱离@AbhishekGowda28 所说的，检查条件中数组的长度。我认为分配给空数组的变量评估为真。

标签： javascript arrays ecmascript-6 react-hooks destructuring

【解决方案1】：

根据你的问题，我知道Details 是一个对象，AplicationsList 是一个数组。

我认为您已经以这种方式或类似方式设置了详细信息的状态 const [Details, setDetails] = useState();。问题在于 Details 的初始值未定义，而您正试图解构未定义。而是将其设置为const [Details, setDetails] = useState({});

在 useEffect 中，您正在检查 AplicationsList 是否为空，但 if(AplicationsList) 即使对于空数组也会返回 true。所以请检查长度，if(AplicationsList.length > 0)

建议：最好将状态变量名设为小写，并按照camleCase格式命名变量。而不是Details 和ApplicationsList，最好重命名为details 和applicationsList。

【讨论】：

准确地说，当 AplicationsList 是一个空数组时，我想将 Detail.components 设置为一个空数组。稍后将显示为“此详细信息中没有组件”。我试过了：const [Details, setDetails] = useState({});并且错误不断出现，setDetail((detail) => ({ ...detail, components: applicationsList })) 也是如此。看起来 aplicationsList 它不仅影响组件属性，而且影响所有细节对象。 @AbhishekGowda @3limin4t0r 感谢您的帮助！我真的被困在这里了
我发现了错误！在我用来存储来自 api 的值的钩子中，我将 [] 设置为结果，因此，当服务返回 [] 时，它没有任何更改并且 useEffect 没有执行！非常感谢