javascript - React Redux 状态条件错误和 useEffect 依赖错误

Question

我有一个组件可以通过 params.id 获取单个帖子的详细信息我的标题错误未定义，但由于我有数据，redux 操作成功返回，我认为组件在接收到 redux 操作有效负载之前先加载？

const UpdatePost = ({ match, history }) => {
  const postId = match.params.id;

  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [image, setImage] = useState('');

  const dispatch = useDispatch();

  const postDetails = useSelector(state => state.postDetails);
  const { loading, error, post } = postDetails;

  const postUpdate = useSelector(state => state.postUpdate);
  const {
    loading: loadingUpdate,
    error: errorUpdate,
    success: successUpdate,
  } = postUpdate;

  useEffect(() => {
    if (successUpdate) {
      dispatch({ type: POST_UPDATE_RESET });
      dispatch({ type: POST_DETAILS_RESET });
      history.push('/edit/post');
    } else {
      console.log(post, postId);
      if (!post.title || post._id !== postId) {
        dispatch(listPostDetails(postId));
      } else {
        setTitle(post.title);
        setDescription(post.description);
        setImage(post.image);
      }
    }
  }, [post, history, dispatch, postId, successUpdate]);

  const submitHandler = e => {
    e.preventDefault();
    dispatch(
      updatePost({
        _id: postId,
        title,
        description,
        image,
      })
    );
  };

  return (
    <MotionBox
      exit={{ opacity: 0 }}
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }}
      bgColor={'#eaeaea'}
      my="1rem"
      border="2px"
      borderColor="#eaeaea"
      borderRadius="25px"
      p={{ base: '2rem 2rem' }}
    >
      <Heading color={'#435943'} size="lg" pb={'1.5rem'}>
        Edit User
      </Heading>
      {loadingUpdate && <Loader />}
      {errorUpdate && <Message status="error">{errorUpdate}</Message>}
      {loading && loadingUpdate ? (
        <Loader />
      ) : error ? (
        <Message status="error">{error}</Message>
      ) : (
        <form onSubmit={submitHandler}>
          <FormControl pb={'1rem'}>
            <FormLabel size="md">Edit Post Title</FormLabel>
            <Input
              borderColor="#d4d6d5"
              placeholder="Edit Post Title"
              value={title}
              onChange={e => setTitle(e.target.value)}
            />
          </FormControl>
          <FormControl pb={'1rem'}>
            <FormLabel size="md">Edit Post Description</FormLabel>
            <Textarea
              size="md"
              value={description}
              onChange={e => setDescription(e.target.checked)}
              placeholder="Edit Post Descrription"
            />
          </FormControl>
          <FormControl pb={'1rem'}>
            <FormLabel size="md">Edit Post Photo</FormLabel>
            <Input
              size="md"
              placeholder="Edit Post Photo"
              value={image}
              onChange={e => setImage(e.target.checked)}
            />
          </FormControl>
          <Button
            type="submit"
            my={'2rem'}
            fontSize={'md'}
            fontWeight={600}
            color="white"
            bg={'green.800'}
            _hover={{
              background: 'green.600',
            }}
            _focus={{
              outline: 'none',
              border: 'none',
            }}
          >
            Update
          </Button>
        </form>
      )}
    </MotionBox>
  );
};

标签： javascriptreactjsreduxreact-redux