如何在 React hooks 中通过 setState 改变状态

Question

App.js

      <Route path="/detail/:id" >
        <PostDetail />
      </Route>

PostDetail.js

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios'


const PostDetail = () => {
  const { id } = useParams();
  let [comments, setComments] = useState([]);

  useEffect(async () => {
    await axios
      .all([
        axios.get(`https://dummyapi.io/data/v1/post/${id}`, {
          headers: { "app-id": process.env.REACT_APP_API_KEY }
        }),
        axios.get(`https://dummyapi.io/data/v1/post/${id}/comment`, {
          headers: { "app-id": process.env.REACT_APP_API_KEY }
        })
      ])
      .then(
        axios.spread((detail, comment) => {
          console.log("before: ", comments)
          console.log("data:", comment.data.data)
          setComments([...comment.data.data])
          console.log("after: ", comments)
        })
      )
      .catch((detail_err, comment_err) => {
        console.error(detail_err);
        console.error(comment_err);
      });
  }, []);

  return (
    <div>
      detail page:
    </div>
  );
};

export default PostDetail;

并使用 axiosin useEffect hook 获取了一些数据，并将 setComments() 与数据一起使用 (comment.data.data)。但由于某种原因它没有设置 axios 数据。它出什么问题了？如果你能帮助我，那将是一个巨大的帮助

Answer 1

setter 方法 (setComments) 是异步的。因此，您不能指望在它之后立即获得更新的值。

setComments([...comment.data.data])
console.log("after: ", comments)

您应该将 log 移动到组件的顶层。

const PostDetail = () => {
  const { id } = useParams();
  let [comments, setComments] = useState([]);

  useEffect(async () => {
    await axios
      .all([
        axios.get(`https://dummyapi.io/data/v1/post/${id}`, {
          headers: { "app-id": process.env.REACT_APP_API_KEY }
        }),
        axios.get(`https://dummyapi.io/data/v1/post/${id}/comment`, {
          headers: { "app-id": process.env.REACT_APP_API_KEY }
        })
      ])
      .then(
        axios.spread((detail, comment) => {
          console.log("before: ", comments)
          console.log("data:", comment.data.data)
          setComments([...comment.data.data])
        })
      )
      .catch((detail_err, comment_err) => {
        console.error(detail_err);
        console.error(comment_err);
      });
  }, []);

  // move the log to here 
  console.log("after: ", comments)

  return (
    <div>
      detail page:
    </div>
  );
};

export default PostDetail;

如果您想在 comments 更改时做一些其他工作，请添加一个 useEffect 挂钩，并将 comments 作为依赖项。

useEffect(() => {
  console.log(comments);
}, [comments]);

如何在 React hooks 中通过 setState 改变状态

how to change state by setState in React hooks

setstate

reactjs