时间戳

首页 > 解决方案 > React：为什么我的状态在 useEffect 的初始渲染中未定义？

reactjs - React：为什么我的状态在 useEffect 的初始渲染中未定义？

问题描述

useEffect 会渲染来自 axios get 请求的数据。但是在控制台中，它将初始结果记录为一个空数组。const childRefs = useMemo(() => new Array(results.length).fill(0).map((i) => React.createRef()),[]);此行要求结果状态与 axios 请求中的数组一起返回，否则我会收到错误消息TypeError: Cannot read property 'current' of undefined 。如果我在 useEffect 中将结果状态作为参数传递，那么 useEffect 会继续调用而不会停止。如何在不无限期调用 useEffect 的情况下在初始渲染上设置结果状态？

export default function SwipePage() {

  const [ results, setResults ] = useState([]);
  const [ isOpen, setIsOpen ] = useState(false);

  const { userState, setUserState } = useContext(UserContext);

  const { id } = useParams();

  const api = `http://localhost:5000/user/match/${id}`;

  const alreadyRemoved = [];

  useEffect(() => {
    axios
      .get(api, {
        headers: {
          Authorization: localStorage.getItem("jwt"),
          "Content-Type": "application/json",
          "Cache-Control": "no-cache",
        },
      })
      .then((res) => {
        setResults(res.data.user);
        console.log(results, "Results")
      });
  }, []);

const childRefs = useMemo(() => new Array(results.length).fill(0).map((i) => React.createRef()),[]);

标签： reactjs

解决方案

使用 useMemo 你会得到一个记忆化的结果。将结果放入 useMemo 的依赖数组中，如果结果状态发生更改，将重新计算您的数据。

const childRefs = useMemo(() => new Array(results.length).fill(0).map((i) => React.createRef()),[results]);

推荐阅读