对象作为React子级无效

6jjcrrmo  于 2022-12-30  发布在  React
关注(0)|答案(3)|浏览(89)

我得到了一个下面的错误。我可以看到我必须返回数组而不是对象。但我真的不知道如何修复它。
对象作为React子级无效。如果要呈现子级集合,请改用数组,或使用React外接程序中的createFragment(object) Package 对象。请检查View的呈现方法。

constructor(props){
    super(props);
    this.state = {timeElapsed: null};
  }

startStopButton(){
    return <TouchableHighlight underlayColor="gray" onPress={this.handleStartPress.bind(this)}>
        <Text>Start</Text>
      </TouchableHighlight>
  }

handleStartPress(){
      var startTime = new Date();
      


      setInterval(()=>{
        this.setState({timeElapsed: new Date()})
      }, 1000);
  }
render(){
return(
  <View style={styles.container}>
    <View style={[styles.header]}>
      <View style={[styles.timerContainer, this.borderColor('#ff6666')]}>
        {this.state.timeElapsed}
      </View>
      <View style={[styles.buttonsContainer, this.borderColor('#558000')]}>
        {this.startStopButton()}
        {this.lapButton()}
      </View>
    </View>
  </View>
);

}
3zwtqj6y

3zwtqj6y1#

timeElapsed是一个对象,React不知道如何呈现它:

<View style={[styles.timerContainer, this.borderColor('#ff6666')]}>
    {this.state.timeElapsed}
  </View>

尝试将this.state.timeElapsed更改为字符串,例如:

<View style={[styles.timerContainer, this.borderColor('#ff6666')]}>
    {this.state.timeElapsed.toString()}
  </View>
eyh26e7m

eyh26e7m2#

<Note note={
 <p>{(new Date(updated_at)).toString()}</p>
} />

在本例中,Note是我的子组件,我如上所述传递了date,它对我起作用了。

输出Pass date to React Child

h6my8fg2

h6my8fg23#

  • 简单明了的是使用JSON.stringify()
  • 因为this.state.timeElapsed是对象。对象不能以正常标准打印。因此我们需要以JSON.stringify()呈现该对象。它转换为JSON格式。
  • 试试这个,这是我的工作
{JSON.stringify(this.state.timeElapsed)}

相关问题