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]);