Invariant Violation：对象作为 React 子级无效（React Native）答案

【问题标题】：Invariant Violation: Objects are not valid as a React child (React Native)Invariant Violation：对象作为 React 子级无效（React Native）
【发布时间】：2019-08-18 21:56:28
【问题描述】：

我正在尝试实现一个简单的功能，一个按钮的onPress 它应该添加placeName 来放置数组并将其显示在视图中，但我似乎得到了一个错误，请帮助

这是我的代码，

export default class App extends Component{

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

  onChangeName = (val) => {
    this.setState({
      placeName: val
    })
  }

  placeSubmitHandler = () => {
    if(this.state.placeName === "") {
      alert('enter something');
    } else {
      this.setState(prevState => {
        return {
          places: prevState.places.concat(prevState.placeName)
        }
      })
    }
  }

  render() {
    const placesOutput = this.state.places.map((place, i) => (
        <Text key={i}>{place}</Text>
    ));
    return (
      <View style={styles.container}>
        <View style={styles.inputContainer}>
            <TextInput 
            style={{width: 300}}
            value={this.state.textInput}
            placeholder='enter anything'
            onChange={this.onChangeName}
            style={styles.placeInput}
            />
            <Button title='Add' style={styles.placeButton} onPress={this.placeSubmitHandler}/>
        </View>
        <View>
          {placesOutput}
        </View>
      </View>
    );
  }
}

这是我遇到的错误，

Invariant Violation: Objects are not valid as a React child (found: object with keys {dispatchConfig, _targetInst, _dispatchListeners, _dispatchInstances, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, nativeEvent, isDefaultPrevented, isPropagationStopped}). If you meant to render a collection of children, use an array instead.
    in RCTText (at Text.js:154)
    in TouchableText (at Text.js:278)
    in Text (at App.js:48)
    in RCTView (at View.js:45)
    in View (at App.js:62)
    in RCTView (at View.js:45)
    in View (at App.js:51)
    in App (at renderApplication.js:35)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:34)

我是 react native 的新手，所以我对此一无所知。

【问题讨论】：

检查stackoverflow.com/questions/33117449/…可能对你有帮助

标签： javascript reactjs react-native

【解决方案1】：

您的 placesOutput 变量正在以 jsx 形式返回一个对象。

代替

const placesOutput = this.state.places.map((place, i) => (
        <Text key={i}>{place}</Text>
         ));

试试

const placesOutput = this.state.places.map((place, i) => (
        <Text key={i}>{place.name} /* place is an object use any property of it. */</Text>
    ));

【讨论】：

我使用了一些随机属性作为示例。您应该使用放置对象可能具有的任何属性。试试看它是否有效。
是的，它是一个对象，我太傻了……它现在可以正常工作了，谢谢

【解决方案2】：

在您的<TextInput> 中，您使用的是onChange 属性而不是onChangeText，因此您尝试在<Text> 中渲染一个对象。只需更改该道具，它应该可以工作

  <TextInput
    style={styles.placeInput}
    value={this.state.textInput}
    placeholder="enter anything"
    onChangeText={this.onChangeName}
  />

另请注意，您正在复制其 style 属性。统一它们或将它们作为数组传递

style={[styles.placeInput, {width: 300}]}

【讨论】：