时间戳

首页 > 解决方案 > 在 React 中显示传递给子组件的状态内容

reactjs - 在 React 中显示传递给子组件的状态内容

问题描述

我是 React 的新手（以及一般的 Web 开发人员），我试图建立一个简单的应用程序。我确信这一定很明显，但现在一天都找不到解决方案。使用下面的代码我得到一个错误：未捕获的不变违规：对象作为 React 子项无效（找到：带有键 {message} 的对象）。如果您打算渲染一组子项，请改用数组。

我还尝试了几种方法来纠正其他帖子，但从未成功（并且出现不同的错误），我觉得我在这里遗漏了一些非常简单的东西。有人可以看看我的代码并告诉我出了什么问题吗？

父组件（另一个组件的子组件，它传递从服务器获取的消息的 id）：

import React from 'react';
import Singlemessage from './Singlemessage';

class Viewmessage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isMessageLoaded: false,
      singleMessage: ''
    };
  }

componentDidMount () {
    fetch('http://localhost:3000/message'
    , {
      method: 'post',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        id: this.props.id,
      })
    })
    .then(res => res.json())
    .then(data => {this.setState({isMessageLoaded: true, singleMessage : data})})
  }

  render () {      
    var { isMessageLoaded } = this.state
    if (!isMessageLoaded) {
        return <div>Loading...</div>
    }
      else {
        return (
            <Singlemessage message={this.state.singleMessage}/>
            )
        }
      }
    }

  export default Viewmessage

单消息组件：

import React from 'react';

const Singlemessage = ({ message }) => {
  return (

      <div>
       {message}
      </div>

  );
}

export default Singlemessage;

标签： reactjs

解决方案

显然data是一个对象，而不是一个字符串。

.then(data => {this.setState({isMessageLoaded: true, singleMessage : data})})

确保您singleMessage在setState函数中实际传递的内容是一个字符串。

此时，可能有一个对象被传递给子组件，无法渲染。

我建议您检查message子组件中传递的内容：

console.log(message);

推荐阅读