React Native 不变违背:组件"input"的视图配置getter回调必须是函数(接收到"undefined")

dkqlctbz  于 2022-12-30  发布在  React
关注(0)|答案(2)|浏览(135)
This is my InputItems.js
    
    import React, { useState } from "react";
    import { Text, View, StyleSheet, TextInput, Button } from "react-native-web";
    
    function InputItems(props) {
      const [inputGoal, setinputGoal] = useState("");
      return (
        <View style={style.wholeInputcontainer}>
          <TextInput
            placeholder="Enter the Text"
            style={style.textInput}
            onChangeText={(enteredtext) => {
              setinputGoal(enteredtext);
            }}
            value={inputGoal}
          />
          <Button title="Submit" onPress={props.onpressprop.bind(this,inputGoal)} />
        </View>
      );
    }
    const style = StyleSheet.create({
      wholeInputcontainer: {
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      },
      textInput: {
        borderBottomColor: "blue",
        borderBottomWidth: 4,
        marginBottom: 10,
        width: 300,
      },
    });
    
    export default InputItems;

and this is my App.js
import React, { useState } from "react";

import { StatusBar } from "expo-status-bar";
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  Button,
  ScrollView,
  FlatList,
} from "react-native";
import Listitems from "./Components/ListItems";
import InputItems from "./Components/InputItems";
// import { Button, TextInput } from 'react-native-web';

export default function App() {
  const [outputGoal, setoutputGoal] = useState([]);
  const Onpress = (InputGoalProp) => {
    setoutputGoal((Currentgoal) => [...Currentgoal, InputGoalProp]);
  };
  return (
    <View style={style.root}>
      <InputItems onpressprop={Onpress} />
      {/* We can use mapping from outputGoal but using FlatList instead of ScrollView is more efficient */}
      <FlatList
        data={outputGoal}
        renderItem={(listitems) => <Listitems anything={listitems.item} />}
      />
      <StatusBar style="auto" />
    </View>
  );
}
const style = StyleSheet.create({
  //StyleSheet is a class of react-native, we can always use inline styleing
  root: {
    marginTop: 100,
  },
});

陷入这个问题。请帮助我,如果你可以。这是错误...
不变违背:组件input的视图配置getter回调必须是一个函数(已接收undefined)。请确保组件名称以大写字母开头。
此错误位于:在输入中(由TextInput创建)在TextInput中(由InputItems创建)

wvyml7n5

wvyml7n51#

您在此行中有一处打印错误:
第一个月
this后面有一个逗号而不是句号。它应该是
<Button title="Submit" onPress={props.onpressprop.bind(this.inputGoal)} />

zzoitvuj

zzoitvuj2#

InputItems.js中,您仍然有错误的导入(看起来您已经在App.js中更正了它):
更改此内容:import { Text, View, StyleSheet, TextInput, Button } from "react-native-web";
至:import { Text, View, StyleSheet, TextInput, Button } from "react-native";

相关问题