redux 不会在反应中获取数据

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])

它 returns 是正确的对象，但是

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

returns:

Cannot read property 'image' of undefined.

有什么建议吗？谢谢

Answer 1

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

如果fetch listMembers return值和fetch listFiles仍然运行ning，你的console.log将运行与files是空数组：[]。所以 files.filter(...)[0] 是 undefined 而你收到这个错误

因此，您可以使用 optional chaining 来检查值，避免同样的问题：

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

redux 不会在反应中获取数据

redux does not fetch data in react

mongodb

reactjs

redux

mern

use-effect