React Native函数组件修改状态后未触发UI重渲染问题求助

useReducer的第二个参数仅作为初始状态值生效，只会在PseudoElement组件首次挂载时读取一次传入的data参数。后续父组件更新传入的data props时，useReducer内部的listItems状态不会自动同步更新，因此不会触发对应UI的重渲染。

方案一：同步props变化到内部状态（推荐） #

适合需要保留PseudoElement内部独立状态管理逻辑的场景：

1. 先给listReducer新增全量替换列表的action分支：

function listReducer<T>(state: State<T>, action: Action<T>) {
  switch (action.type) {
    // 保留原有其他case
    case 'REPLACE_ITEMS':
      return {
        ...state,
        listItems: action.payload,
      };
    default:
      return state;
  }
}

2. 在PseudoElement组件内添加useEffect监听data props变化，触发同步更新：

useEffect(() => {
  dispatch({
    type: 'REPLACE_ITEMS',
    payload: data
  })
}, [data])

方案二：改为完全受控组件 #

如果PseudoElement的列表数据完全由父组件控制，不需要内部独立维护，可以直接移除内部状态里的listItems定义，渲染时直接使用传入的props.data即可，不需要额外存到内部useReducer中，父组件更新props时会自动触发重渲染。

你当前的测试模拟数据存在多条id为1的重复数据，如果后续涉及列表diff更新，建议保证列表项id唯一，避免出现渲染异常。

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