React Native新手使用Redux实现点击数字自增时出现白屏问题

你的代码存在两个直接引发白屏、功能失效的问题：

• 函数组件缺少返回值：Hello组件内的JSX结构没有通过return返回，组件默认返回undefined，React Native无法解析渲染undefined，直接触发白屏。
• 点击事件写法错误：onPress={dispatch(numIncrement())} 会在组件渲染阶段就立即执行dispatch，而非等待用户点击触发，会造成「状态更新→组件重渲染→再次立即执行dispatch→再次重渲染」的死循环，直接导致应用卡死白屏。

修正后的完整代码 #

const Hello = () => {
  const txt = useSelector(state => state.reducer.number);
  const dispatch = useDispatch();
  // 补充return返回JSX，onPress用箭头函数包裹，仅点击时触发dispatch
  return (
    <>
      <View>
        <Button title="+" onPress={() => dispatch(numIncrement())} />
        <Text>{txt}</Text>
      </View>
    </>
  )
}

const App = () => {
  return (
    <Provider store={store}>
      <Hello />
    </Provider>
  );
};
export default App;

排查提示：如果修改后仍有异常，请确认Redux store配置、numIncrement action定义、对应reducer的自增处理逻辑没有语法或逻辑错误。

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