如何在 useState prevState 映射中使用 "if"

Question

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

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

这可行，但没有 if

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

Answer 1

如果您只是想查找项目，我认为您不需要映射。你可以做

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

Answer 2

由于您使用的地图 return 是一个新数组，您还试图仅在那时向匹配项添加图像键，对于其他情况，您还需要 return .

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

Answer 3

“不起作用”需要更多说明。出于观察，我可以说它需要有 else 语句或没有，以便 return 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

如何在 useState prevState 映射中使用 "if"

How to use "if" inside useState prevState map

reactjs

use-state