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

您如何知道未设置状态？这可能会指出问题的根源。在您的代码中看不到任何错误。可能发生的情况：设置状态是一个异步操作，这意味着仅在呈现组件，调用useEffect，调用API，然后将数据传递给状态之后，才设置状态。如果您试图读取该组件内部的状态值，但得到的是空值-这不是因为从未设置状态，而是因为您在更新初始状态时正在读取为初始状态设置的值。

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

很抱歉，如果我不在基地。

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

1 个答案: