如何在 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 — 这不是因为从未设置状态，而是因为您正在读取为初始状态设置的值，然后才更新。

尝试将状态作为道具传递给另一个组件，看看你是否可以在那里读取它。

抱歉，如果我不在基地。