React Native：道具警告，道具值无效

Question

我是 React Native 新手，我正在构建示例应用程序，在向 TextInput 字段输入数据时收到警告。我在 Android 模拟器和我的 Pocophone f1 设备上尝试了运行它并得到了相同的结果。我正在使用 VS Code 作为我的 IDE。我正在开发 Ubuntu 18.04
谁能帮忙？这些是应用程序的屏幕截图

我正在输入的数据。
警告我得到

这是我的代码

        /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     *
     * @format
     * @flow
     */

    import React, {Component} from 'react';
    import {Platform, StyleSheet, Text, View, TextInput, Button} from 'react-native';

    //type Props = {};
    export default class App extends Component {

      state = {
        placeName: "",
        places: []
      }


      placeNameChangedHandler = (event) => {
        this.setState({
          placeName: event
        });
      }

      placeNameSubmitHandler = () => {
        if (this.state.placeName === ""){
          return;
        }
        this.setState(prevState => {
          return {
            places: prevState.places.concat(prevState.placeName)
          };
        });
      };

      render() {
        const placesOutput = this.state.places.map(place => (
          <Text>{place}</Text>
        ));
        return (
          <View style={styles.container}>

            <View style={styles.inputContainer}>
            <TextInput
            style={{width: 200, borderColor: "black", borderWidth: 1}}
            placeholder="Place Name"
            value={this.state.placeName} 
            onChangeText={this.placeNameChangedHandler} 
            style={styles.PlaceInput} />
            <Button title="Add"  style={styles.placeButton} onPress={this.placeNameChangedHandler} />
            </View>
            <View>
                {placesOutput}
            </View>
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        padding: 26,
        justifyContent: 'space-between', 
        alignItems: 'center',
        backgroundColor: '#F5FCFF', 
      },
      inputContainer:{
        width: "100%",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: 'center'
      },
      PlaceInput:{
    width: "70%"
      },
      placeButton:{
    width: "30%"
      }

    });

我按照下面答案中的建议更改了代码，但出现如下屏幕所示的错误

Answer 1

如果您在 placeNameChangedHandler 函数中记录 "event"，您会看到它是一个对象，而不仅仅是您要查找的字符串值。因此，您将状态设置为完整的事件对象，然后尝试将其呈现在屏幕上。

您需要解构对象以获得您要查找的字符串值。

  placeNameChangedHandler = (event) => {
    this.setState({
      placeName: event.target.value
    });
  }

Answer 2

我发现了问题：在 **onPress 事件处理程序上我调用了错误的函数，抱歉我西了 **

React Native：道具警告，道具值无效

React Native: Props Warning, invalid prop value

warnings

textinput

react-native