从chrome.storage取值后如何更新子组件Props并触发重渲染？

使用chrome.storage.sync.get更新父组件name状态后，子组件RadioButton未重新渲染，即便存储的name值为"John"，对应的单选按钮也未选中。

问题根源 #

1. 父组件状态赋值错误：getName()返回的是包含name字段的对象（如{name: "John"}），但父组件直接将整个对象赋值给了name状态，导致name不是预期的字符串类型。
2. 子组件state未同步props：子组件用本地state存储buttonChecked，但useState的初始值仅在组件挂载时生效一次，后续父组件传递的name props更新时，子组件的buttonChecked不会自动同步。

解决方案 #

1. 修复父组件的状态赋值

修改popup.tsx中获取存储值的逻辑，正确提取name字段：

const [name, setName] = useState<string>()

useEffect(() => {
  getName().then((storedData) => {
    // 提取存储对象中的name字段赋值给状态
    setName(storedData.name)
  })
}, [])

return (
  <div>
    <RadioButton name={name} />
  </div>
)

2. 让子组件响应props更新

有两种可选方案：

方案A：直接使用props（推荐）

子组件无需维护本地state，直接通过父组件传递的name props判断选中状态：

const RadioButton: React.FC<AppProps> = ({ name }) => {
  return (
    <input type="radio" checked={name === "John"} />
  )
}

方案B：监听props变化同步本地state（需维护state时使用）

如果子组件必须使用本地state，添加useEffect监听name props的变化，同步更新buttonChecked：

const RadioButton: React.FC<AppProps> = ({ name }) => {
  const [buttonChecked, setButtonChecked] = useState<string | undefined>(name)

  // 监听name props变化，更新本地state
  useEffect(() => {
    setButtonChecked(name)
  }, [name])

  return (
    <input type="radio" checked={buttonChecked === "John"} />
  )
}

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