React Native: Props Warning, недопустимое значение пропа

Question

Я новичок, чтобы реагировать нативно, я строю пример приложения и при вводе данных в поле TextInput я получаю предупреждение.Я попытался запустить его на эмуляторе Android и на моем устройстве Pocophone f1 и получил те же результаты.Я использую VS Code в качестве моей IDE.Я разрабатываю на Ubuntu 18.04
Может кто-нибудь помочь?Это скриншоты приложения

1. данные, которые я ввожу.

2. Предупреждение I get

Это мой код

        /**
     * 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, вы бы увидели, что это объект, а не просто искомое строковое значение.Таким образом, вы устанавливаете свое состояние для полного объекта события, а затем пытаетесь отобразить его на экране.

Вам нужно деструктурировать объект, чтобы получить искомое строковое значение.

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

Answer 2

Я обнаружил проблему: в обработчике событий ** onPress я вызвал неправильную функцию, извините за то, что я запустил **