React中setState首次调用不触发重绘，二次调用才生效问题求助

问题情况 #

在React组件里调用setState，明明传了新引用的对象，组件却非要第二次调用才重绘。这个state是存储开关状态的键值对，初始值配置没问题。第一次点击toggle得点两次才生效，后续操作都正常，已排除Toggle组件本身的问题——把state转成JSON字符串渲染也有同样的情况，而且toggleSelected方法确实被正确调用，setState也执行了。

用到的代码 #

interface optionInterface {
  label: string
  labelTx?: TextProps["tx"]
  value: string
}

export interface MultiToggleProps {
  style?: StyleProp<ViewStyle>
  options: optionInterface[]
  singleChoice?: boolean
  onChange?: (value: any) => void
}

export const MultiToggle = observer(function MultiToggle(props: MultiToggleProps) {
  const { style, options, singleChoice, onChange} = props
  const $styles = [$container, style]
  const [selectionState, setSelectionState] = React.useState(
      options.reduce((acc, option) => {
        acc[option.value] = false
        return acc
      }, {})
  )

  const toggleSelected = (key: string) => {
    const newSelectionState = {...selectionState}

    if (singleChoice) {
      // 重置所有选项
      Object.keys(newSelectionState).forEach((k) => {
        newSelectionState[k] = false
      })
    }
    // 切换当前选项状态
    newSelectionState[key] = !!!newSelectionState[key]
    setSelectionState(newSelectionState)
    onChange(newSelectionState)
  }

  return (
    <View style={$styles}>
      {options.map((option, index) => {
        return (
          <View key={index} style={$toggleItem} >
            <Toggle 
              variant="radio"
              value={selectionState[option.value]}
              key={index} label={option.label} labelTx={option.labelTx} onValueChange={() =>
                toggleSelected(option.value)
              }
              />
          </View>
        )
      })}
    </View>
  )
})

问题原因 #

1. state未同步props变化：useState的初始值仅在组件首次挂载时计算一次。如果props.options是父组件异步加载后才传递的，组件第一次渲染时selectionState是基于空数组生成的空对象，后续options更新后，selectionState不会自动同步，导致第一次点击修改的是旧的空对象，视觉上无变化。
2. 闭包捕获旧state：直接基于当前selectionState创建新对象时，可能因闭包捕获了旧的state值，导致第一次更新未拿到最新状态。

解决方案 #

1. 让state同步props更新 #

添加useEffect监听props.options的变化，只要options更新，就重新初始化selectionState：

export const MultiToggle = observer(function MultiToggle(props: MultiToggleProps) {
  const { style, options, singleChoice, onChange} = props
  const $styles = [$container, style]
  // 先初始化空对象，后续通过useEffect同步
  const [selectionState, setSelectionState] = React.useState<Record<string, boolean>>({})

  // 监听options变化，同步生成初始状态
  React.useEffect(() => {
    const initialState = options.reduce((acc, option) => {
      acc[option.value] = false
      return acc
    }, {} as Record<string, boolean>)
    setSelectionState(initialState)
  }, [options])

  // 其他代码保持不变
})

2. 使用函数式更新setState #

改用函数式更新，确保每次更新都基于最新的state值，避免闭包问题：

const toggleSelected = (key: string) => {
  setSelectionState(prevState => {
    const newSelectionState = {...prevState}
    
    if (singleChoice) {
      Object.keys(newSelectionState).forEach(k => {
        newSelectionState[k] = false
      })
    }
    
    // 简化逻辑，!!!可替换为!，效果一致
    newSelectionState[key] = !newSelectionState[key]
    
    // 加可选链，防止onChange未传递时报错
    onChange?.(newSelectionState)
    
    return newSelectionState
  })
}

3. 优化列表key（可选） #

将map中的key从index改为option.value，避免因options顺序变化导致React复用组件不更新：

{options.map((option) => {
  return (
    <View key={option.value} style={$toggleItem} >
      <Toggle 
        variant="radio"
        value={selectionState[option.value]}
        key={option.value} 
        label={option.label} 
        labelTx={option.labelTx} 
        onValueChange={() => toggleSelected(option.value)}
      />
    </View>
  )
})}

修改完成后，首次点击toggle即可正常触发state更新和组件重绘。

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