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

Question

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()),[]);

Answer 1

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

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