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

【问题标题】：React: Why is my state undefined on the initial render from useEffect?React：为什么我的状态在 useEffect 的初始渲染中未定义？
【发布时间】：2021-09-13 00:21:06
【问题描述】：

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

【解决方案1】：

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

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

【讨论】：

英雄！谢谢！