錯誤：React.Children.onlyexpectedtoreceiveasingleReactelementchildinreactnative

我正在嘗試使用formik本機反應創建一個表單，但我被這個錯誤困住了，我不知道我在這里做錯了什么。

錯誤：

Error: React.Children.only expected to receive a single React element child.

This error is located at:
    in Formik (created by RegisterScreen)
    in RCTScrollContentView (created by ScrollView)
    in RCTScrollView (created by ScrollView)
    in ScrollView (created by ScrollView)
    in ScrollView (created by RegisterScreen)
    in RCTView (created by View)
    in View (created by RegisterScreen)
    in RegisterScreen (created by SceneView)
.....

我的代碼：

   <ScrollView>
        <Text>Sign up to get started</Text>
        <Formik
          initialValues={{
            name: "",
         ...
          }}
          onSubmit={...}
          validationSchema={yup.object().shape({
            name: .....
          })}
        >
          {" "}
          {({
            values,
            handleChange,
            errors,
            setFieldTouched,
            touched,
            isValid,
            handleSubmit,
          }) => (
            <KeyboardAvoidingView enabled>
              <View style={styles.SectionStyle}>
                <TextInput
                value={values.name}
                  onChangeText={handleChange("name")}
                  onBlur={() => setFieldTouched("name")}
                  style={styles.inputStyle}
                  underlineColorAndroid="#f000"
                  placeholder="Enter Name"
                  placeholderTextColor="#8b9cb5"
                  autoCapitalize="sentences"
                  returnKeyType="next"
                  blurOnSubmit={false}
                />
                {touched.name && errors.name && (
                  <Text style={styles.errorText}>{errors.name}</Text>
                )}
              </View>
              <View style={styles.SectionStyle}>
                <TextInput
                .....
                />
                {touched.email && errors.email && (
                  <Text style={styles.errorText}>{errors.email}</Text>
                )}
              </View>
              <View style={styles.SectionStyle}>
                <TextInput
                 .....
                />
                {touched.phone && errors.phone && (
                  <Text style={styles.errorText}>{errors.phone}</Text>
                )}
              </View>
              <View style={styles.SectionStyle}>
                <TextInput
                .....
                />
                {touched.password && errors.password && (
                  <Text style={styles.errorText}>{errors.password}</Text>
                )}
              </View>
              <View style={styles.SectionStyle}>
                <TextInput
                  .....
                />
                {touched.confirmPassword && errors.confirmPassword && (
                  <Text style={styles.errorText}>{errors.confirmPassword}</Text>
                )}
              </View>
              <View style={styles.CheckBox}>
                <Switch
                  style={styles.switch}
                  onValueChange={(newValue) => setSwitchBox(!newValue)}
                  value={!switchBox}
                />
                <Text style={styles.CheckBoxText}>Show Password</Text>
              </View>
              {error ? (
                <ErrorAwesomeAlerts
                  message={`${error}`}
                  ...
                  }}
                />
              ) : null}
              <Pressable
                disabled={!isValid}
                ...
              >
                {loading ? (
                  <View style={styles.activityIndicator}>
                    ....
                  </View>
                ) : (
                  <Text style={styles.buttonTextStyle}>Sign Up</Text>
                )}
              </Pressable>
            </KeyboardAvoidingView>
          )}
        </Formik>
      </ScrollView>

我嘗試通過從中洗掉 <View style={styles.SectionStyle}>來解決此錯誤，<TextInput>但它沒有解決此錯誤。

如果需要，我已經洗掉了一些不相關的代碼，我可以把它放回去，請在評論中告訴我。

為什么會出現此錯誤，我該如何解決？

uj5u.com熱心網友回復：

你有 2 個“組件”：

{" "}

和

({...}) => <KeyboardAvoidingView enabled>
...

嘗試洗掉第一個。

標籤：javascript反应反应本机形式福尔米克

上一篇：我如何迭代、動態加載我的表單輸入元素，然后在React的表單提交上檢索輸入值？

下一篇：填寫表格并將其保存在資料庫中