使用Firebase createUserWithEmailAndPassword创建账号时出现栈溢出错误

调用栈溢出（Maximum call stack size exceeded）通常是无限循环渲染或函数无限递归导致的，结合你提供的代码，大概率问题出在FormInput子组件的onChange事件处理上，以下是具体排查和解决步骤：

1. 优先排查FormInput组件的实现 #

你在SignupScreen中给FormInput传递了onChange={handleChange}，如果FormInput内部错误地直接执行了onChange函数（而非在输入变化时触发回调），会导致每次组件渲染都调用handleChange，进而触发setUserInfo更新状态，引发组件无限重渲染，最终栈溢出。

错误示例（FormInput可能的问题写法）： #

const FormInput = ({ labelName, onChange }) => {
  // 错误：直接调用onChange，而非作为回调绑定到输入事件
  onChange(labelName, "some value");
  return <TextInput />;
};

正确写法（修正FormInput）： #

确保onChange仅在输入内容变化时被调用，比如绑定到TextInput的onChangeText事件：

import { TextInput, View, Text } from 'react-native';

const FormInput = ({ labelName, onChange }) => {
  const handleInputChange = (text) => {
    // 仅当输入变化时，调用父组件传递的handleChange
    onChange(labelName, text);
  };

  return (
    <View>
      <Text>{labelName}</Text>
      <TextInput onChangeText={handleInputChange} />
    </View>
  );
};

export default FormInput;

2. 优化handleChange的状态更新逻辑 #

虽然这不是当前栈溢出的直接原因，但使用函数式更新可以避免闭包导致的状态更新异常，建议修改handleChange：

const handleChange = (label, value) => {
  // 使用函数式更新，确保拿到最新的state
  setUserInfo(prevUserInfo => ({ ...prevUserInfo, [label]: value }));
};

3. 验证Button组件的onPress绑定 #

你的代码中onPress={handleSubmit}是正确的（没有加括号直接调用），如果写成onPress={handleSubmit()}会导致组件渲染时直接执行handleSubmit，也可能引发循环，但你的代码这里没问题，可以忽略。

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