如何通过props设置state初始值？示例写法是否正确还有其他实现方式吗

原写法正确性判断 #

你提供的useState初始化写法是完全合法可用的，仅在仅需要将props.data作为state初始值、后续props.data更新不需要同步到该state的场景下，逻辑完全正确：初始化时会先判断props.data是否存在，存在则取内部的BrokerId作为初始值，不存在就兜底为null，覆盖了props无data的边界情况。

注意：useState的初始值只会在组件首次渲染时执行一次，如果后续props.data发生更新，该写法不会同步修改brokerId的值，如果有同步需求需要搭配其他逻辑实现。

其他实现方式 #

• 可选链+空值合并运算符简化写法
  可以用ES6+的可选链和空值合并运算符简化三元表达式，代码更简洁，同时可以避免0、空字符串这类合法的falsy值被误覆盖：

  const [brokerId, setBrokerId] = useState(props.data?.BrokerId ?? null)
  

• 支持props更新同步state的写法
  如果需要在props.data的BrokerId变化时同步更新state，可以搭配useEffect实现：

  const [brokerId, setBrokerId] = useState(props.data?.BrokerId ?? null)
  
  useEffect(() => {
    setBrokerId(props.data?.BrokerId ?? null)
  }, [props.data?.BrokerId])
  

• 无内部修改需求时省略state
  如果这个brokerId在组件内部不需要被修改，完全不需要声明独立state，直接取值使用即可，减少不必要的状态维护：

  const brokerId = props.data?.BrokerId ?? null
  

• 解构props设置默认值兜底
  可以在解构props时给data设置默认空对象，后续取值逻辑更简洁：

  const { data = {} } = props
  const [brokerId, setBrokerId] = useState(data.BrokerId ?? null)
  

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