Javascript react中的状态未呈现到屏幕

我在构造函数中创建了一个

state

，在

componentDidmount

中创建了一个

setState

，当我试图

将该状态对象渲染到屏幕时，它抛出了错误，我使用的服务器是
节点API
，其他一切都正常工作。帮我解决这个问题

app.js（react）

从节点API调用的路由函数：

function billing_get(req,res) {
    res.send("get method working")
}

注意：我通过修改
create react app
创建了这个项目，并在react package.json下添加了
proxy
，以建立节点API和react之间的连接

完整错误消息：

Objects are not valid as a React child (found: object with keys {messages}). If you meant to render a collection of children, use an array instead.
    in div (at App.js:42)
    in p (at App.js:40)
    in div (at App.js:35)
    in App (at index.js:7)
./src/index.js
src/index.js:7

   4 | import App from './App';
   5 | import registerServiceWorker from './registerServiceWorker';
   6 | 
>  7 | ReactDOM.render(<App />, document.getElementById('root'));
   8 | registerServiceWorker();
   9 | 
  10 | 

This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

对象作为React子对象无效（找到：具有键{messages}的对象）。如果要呈现子对象集合，请改用数组。
在div中（在App.js:42中）
在p中（在App.js:40中）
在div中（在App.js:35中）
应用程序内（位于index.js:7）
./src/index.js
src/index.js:7
4 |从“./App”导入应用程序；
5 |从“./registerServiceWorker”导入registerServiceWorker；
6 | 
>7 | ReactDOM.render（，document.getElementById（'root'））；
8 | registerServiceWorker（）；
9 | 
10 | 
此屏幕仅在开发中可见。如果应用程序在生产中崩溃，它将不会出现。
打开浏览器的开发人员控制台以进一步检查此错误。
无法呈现
状态
对象（注意：小写，而不是
状态
！），以下操作将永远无法工作：

<div>{this.state}</div>

{this.state}

相反，请按如下方式提取属性：


类示例扩展了React.Component{
构造函数（）{
超级（）
此.state={
信息：[“你好”，“再见”]
}
}
渲染（）{
//从状态中提取消息数组，然后映射到该数组以获取每条消息
const{messages}=this.state
返回(
{messages.map（message=>(
{message}
))}
)
}
}
ReactDOM.render(
, 
document.getElementById（'root'））
)
首先将
this.State
重命名为
this.State
，状态定义应为小写

在应用程序组件中，您在
jsx元素中渲染对象，它是不正确的。尝试映射消息并为每个实体返回单独的元素：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';

class App extends Component {
  constructor(props) {
    super(props);
    this.State = {
      messages:[]
    }
  }
  componentDidMount() {
    axios.get('/patient/billing_get')
      .then((result) => {
        const messages = result.data
        console.log(messages);
        this.setState({
          messages: [...messages]
        })
      })
  }

  render() {
   const { messages }  = this.state;
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
          <div>
           {messages.map(item => <span key={messages.indexOf(item)}>{item}</span>)}
          </div>
         </p>
     </div>
    );
  }
}

export default App;

编辑验证html
下午八点

将
状态
更改为
状态
，然后在渲染函数中进行更改
{this.State}
到
{this.State.messages}
或者更改为以下内容，以便对如何呈现每条消息进行更多控制

 <div>
  {
      this.state.messages.map((message) => {
           return (<div>{message}</div>);
      })
  }
 </div>

对此

axios.get('/patient/billing_get')
  .then((result) => {
    // Because you're just returning a string and not an array..
    const message = result.data
    this.setState({
      messages: [...this.state.messages, messages]
    })
})

看起来你正在这样做。State而不是this.State。。另外，您不能这样打印它，因为它是一个对象，请按{this.state.messages[0].id}的方式打印它。例如，您不理解错误消息的哪一部分？我似乎很清楚问题是什么。为什么你有
状态而没有
状态
？@Dario尝试了状态和状态，向我显示了相同的错误可能重复感谢回复，在使用代码时仍然会出现此错误，警告：validateDOMNesting（…）：不能显示为的后代。在div中（在App.js:34）在p中（在App.js:32）在div中（在App.js:27）在App中（在index.js:7）发生此错误是因为html嵌套无效。我编辑了我的答案，使其在渲染方法中有效。感谢您的回复，在使用代码时仍然会出现此错误，警告：validateDOMNesting（…）：无法显示为的后代。在div中（在App.js:34）在p中（在App.js:32）在div中（在App.js:27）在App中（在index.js:7）@FunWorld更新了我的答案，为您修复它。另外，将第32行上的div标记更改为span标记。。看起来你有林廷。非常感谢你的回复：）
 <div>
  {
      this.state.messages.map((message) => {
           return (<div>{message}</div>);
      })
  }
 </div>

axios.get('/patient/billing_get')
  .then((result) => {
    const messages = result.data
    console.log(messages);
    this.setState({
      messages: [...messages]
    })
})

axios.get('/patient/billing_get')
  .then((result) => {
    // Because you're just returning a string and not an array..
    const message = result.data
    this.setState({
      messages: [...this.state.messages, messages]
    })
})