如何在 useState prevState 映射中使用“if”答案

【问题标题】：How to use "if" inside useState prevState map如何在 useState prevState 映射中使用“if”
【发布时间】：2021-10-27 23:32:24
【问题描述】：

有谁知道我如何使用这样的 if 语句。这个例子不起作用

uppy.on('complete', (result) => {
  result.successful.forEach((file) =>
    setImgs((prevState) =>
      prevState.map((item) => {
        if(item.id === file.id) {
          return {
            ...item,
            image: file.preview
          }
        }
      })
    )
  )
})

这行得通，但没有如果

uppy.on('complete', (result) => {
  result.successful.forEach((file) =>
    setImgs((prevState) =>
      prevState.map((item) => ({
        ...item,
        image: file.preview,
      }))
    )
  )
})

【问题讨论】：

标签： reactjs use-state

【解决方案1】：

“不起作用”需要更多规范。出于观察，我可以看出它是否需要有 else 语句，以便在不需要更改的情况下返回 item。变量 - item 是 imgs 数组的未更改元素，我们将其放回。
这是在重构伪代码之后：

uppy.on("complete", (result) => {
  result.successful.forEach((file) => 
    setImgs((prevState) =>
      prevState.map((item) => {
        if (item.id === file.id) {
          return { id: item.id, image: file.preview };
        } else return item;
      })
    )
  );
});

检查沙盒here

【讨论】：

【解决方案2】：

由于您使用的是返回新数组的映射，因此您也尝试将图像键添加到匹配的项目，因此您还需要为 else 情况返回。

const data = state.map((item) => {
  if (item.id === file.id) return { ...item, image: file.preview };
  return item;
});

【讨论】：

【解决方案3】：

如果您只是想找到一个项目，我认为您不需要映射。你可以这样做

const item = prevState.find(x.id ==> file.id)
return item? {...item.image:file.preview} : null

【讨论】：

别忘了将答案标记为已解决