React组件useState无法从props设置初始值问题求助

我有一个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]);
}

原因分析 #

这是因为useState的初始值只会在组件首次渲染时计算一次。如果父组件中url是异步获取的（比如从接口请求数据），组件首次渲染时url可能还是null，此时useState就会把avatarPath的初始值固定为null。后续url更新为有效值时，useState不会自动同步这个变化，所以你会看到控制台先输出null，之后url才变成0.jpg。

可选方案 #

1. 你的临时方案（推荐，适用于需要修改avatarPath的场景）
   用useEffect监听url的变化，一旦url更新就同步到avatarPath，这是处理props到state同步的标准做法。

2. 无需state的方案（适用于仅展示、不需要修改avatarPath的场景）
   如果不需要后续修改avatarPath，可以直接使用url，或者用useMemo做缓存：

   import { useMemo } from "react";
   
   export default function Avatar({ uid, url, size, onUpload }) {
     const avatarPath = useMemo(() => url, [url]);
     // 直接使用avatarPath即可
   }
   

内容的提问来源于stack exchange，提问作者David Stevens