在 OnPress 中调用两个函数会引发“重新渲染过多”错误

Question

我有一个模式，其中包含用户可以更新其个人资料信息的表单。提交表单后，我想更新他们在数据库中的数据，并关闭模式。我有一个处理程序可以同时执行这两种操作，我在提交按钮中调用 onPress - 但是每当我尝试加载屏幕时，这都会引发错误invariant violation- too many re-renders。我怀疑这是因为我以错误的方式更新状态，但我不确定为什么，因为我只调用了一次 useState。我的代码如下：

const TeamEditForm = props => {
  const initialState = {
    newTeamName: "",
    modalVisible: false,
  }

  const [modalVisible, setModalVisible] = useState(initialState.modalVisible)
  const [newTeamName, setNewTeamName] = useState(initialState.newTeamName)
  const [logo, setLogo] = useState("1")

  const { teamName } = props

  const { user } = useContext(UserContext)
  const { uid } = user

  const toggleModal = () => {
    setModalVisible(!modalVisible)
  }

  const handleNewTeamName = text => {
    setNewTeamName(text)
  }

  const onSubmit = (uid, newTeamName, logo) => {
   updateUser(uid, newTeamName, logo)
   toggleModal() /** This line is what's causing the error, if I remove it code works */
  }



  return (
 <View>
      <Modal
        animationType="slide"
        transparent={false}
        visible={modalVisible}
        supportedOrientations={["landscape"]}
      >
        <View style={styles.formContainer}>
          <TouchableOpacity
            style={{
              flexDirection: "row",
              justifyContent: "flex-start",
              width: "100%",
            }}
            onPress={toggleModal}
          >
            <Text style={{ fontSize: 40, marginLeft: 10 }}>X</Text>
          </TouchableOpacity>
          <TextInput
            style={[styles.teamNameInput, globalStyles.h1]}
            underlineColorAndroid="transparent"
            placeholder={teamName}
            placeholderTextColor="#000"
            onChangeText={handleNewTeamName}
          />
          <LogoSelector
            style={{ marginVertical: 10 }}
            selected={logo}
            onSelect={setLogo}
          />
          <CustomButton
            title="Submit"
            onPress={onSubmit()}
            size="sm"
          />
        </View>
      </Modal>
      <TouchableOpacity onPress={toggleModal}>
        <Text style={globalStyles.h4}> Edit Team </Text>
      </TouchableOpacity>
    </View>
  )
}

export default TeamEditForm

Answer 1

首先你不应该像这样使用 onPress。而是使用这个：

onPress={() => this.firstFunction(param1) }>

如果你想用 onPress 更新状态，你可以这样做：

onPress={() => this.setState({ submit: !this.state.submit })}