如何在 useEffect 钩子中设置状态？

Question

我是新手，在搜索和弄乱代码后找不到答案。 我在 useEffect 钩子内向我的服务器发出 get 请求，并尝试获取响应并将其设置为一个状态。 我正确地从服务器返回响应，但由于某种原因，我无法接收响应并将其设置为某种状态（下面的 setProfile 什么也不做）。 这是代码：

const Profile = () => {
  const [profile, setProfile] = useState(null);
  const { state, dispatch } = useContext(UserContext);
  const { userid } = useParams();

  useEffect(() => {
    fetch(`/user/${userid}`, {
      headers: {
        Authorization: 'Bearer ' + localStorage.getItem('jwt'),
      },
    })
      .then((res) => res.json())
      .then((result) => {
        setProfile(result);
      });
  }, []);

令人费解的是，我能够在类似的 get 请求中很好地设置状态：

const Profile = () => {
  const [mypics, setPics] = useState([]);
  const { state, dispatch } = useContext(UserContext);

  useEffect(() => {
    fetch('/myposts', {
      headers: {
        Authorization: 'Bearer ' + localStorage.getItem('jwt'),
      },
    })
      .then((res) => res.json())
      .then((result) => {
        setPics(result.myposts);
      });
  }, []);

任何帮助将非常感激。

Answer 1

你怎么知道状态没有被设置？ 这可能会指向您问题的根源。 我在您的代码中没有看到任何错误。 可能发生的情况：设置 state 是一个异步操作，这意味着只有在组件呈现、useEffect 被调用、API 被调用，然后将数据传递给 state 后才会设置 state。 如果您尝试读取该组件内的状态值，并且得到 null — 这不是因为状态从未设置过，而是因为您正在读取在更新之前为初始状态设置的值。

尝试将 state 作为 prop 传递给另一个组件，看看是否可以在那里读取它。

抱歉，如果我不在基地。