我有一个Avatar组件，它被传递了一个非空的url。我尝试将avatarPath的初始值设置为url，但avatarPath为null。
import { useState } from "react";
export default function Avatar({ uid, url, size, onUpload }) {
const [avatarPath, setAvatarPath] = useState(url);
console.log(url);
console.log(avatarPath);在控制台中，记录的值为：
0.jpg
null我目前的解决方法是这样做的：
export default function Avatar({ uid, url, size, onUpload }) {
const [avatarPath, setAvatarPath] = useState(null);
useEffect(() => {
setAvatarPath(url);
}, [url]);
2条答案
按热度按时间x4shl7ld1#
每次Avatar组件重新渲染
useState(url)时都会运行。但是useState钩子的工作方式是它只会使用url值一次。在此之后，状态值的任何更改都将由setState引起。如果useState在每次重新渲染后都会改变avatarPath的值，这将是非常无用的，因为它每次都会将avatarPath的值重置为初始值。文档建议：
如果您需要的值可以完全从当前props或其他状态计算出来，那么请完全删除那个冗余状态。
如果不是这样，那么你所做的就是正确的。
hmae6n7t2#
在上面的代码中，您在设置useState之后尝试访问变量 avatarPath ryt，并且您知道
useState is an asynchronous hook, it will wait for the component to finish its cycle, re-render, and then it will update the state.因此，您可能需要在设置 avatarPath 的值后继续执行另一个操作。
例如