Question

我在执行 redux 时遇到问题。我正在创建一个应用程序，在该应用程序中我通过一条路线创建成员并通过另一条路线将他们的图像上传到 MongoDb。当我想根据每个成员名称获取成员和图像时，遇到了以下错误：

这是我获取数据的方式：

const MemberList = () => {
  const dispatch = useDispatch()

  const memberList = useSelector((state) => state.memberList)
  const { loading, error, members } = memberList

  const filesList = useSelector((state) => state.filesList)
  const { loading: uploadLoading, error: uploadError, files } = filesList

  useEffect(() => {
    dispatch(listMembers())
    dispatch(listFiles())
  }, [dispatch])

  return (
    <>
      {uploadLoading && <Loader />}
      {uploadError && <Message variant='danger'>{uploadError}</Message>}
      {loading ? (
        <Loader />
      ) : error ? (
        <Message variant='danger'>{error}</Message>
      ) : (
        <>
          {members &&
            members.map((member) => (
              <MemberItem
                key={member._id}
                member={member}
                image={
                  files.filter((file) => member.name === file.name)[0].image
                }
              />
            ))}
        </>
      )}
    </>
  )
}

通过

console.log(files.filter((file) => member.name === file.name)[0])

它返回正确的对象，但是

console.log(files.filter((file) => member.name === file.name)[0].image)

返回：

Cannot read property 'image' of undefined.

有什么建议吗？谢谢

Answer 1

因为在获取数据时，files 的值是您在 redux-store 中声明的默认值。我认为您声明的是一个空数组：[]。

如果 fetch listMembers 返回值且 fetch listFiles 仍在运行，您的 console.log 将运行，files 为空数组：[]。所以 files.filter(...)[0] 是 undefined 并且你收到这个错误

所以，你可以使用 optional chaining 来检查值，避免同样的问题：

console.log(files.filter((file) => member.name === file.name)[0]?.image)

redux 不会在反应中获取数据

1 个答案: