编辑验证html

Question

我在构造函数中创建了state，在setState中创建了componentDidmount，当我尝试将render状态对象设置为屏幕时，它正在抛出错误，服务器即时使用是node API，其他所有事情都正常。帮我解决这个问题

app.js（反应）

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() {
    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>{this.State}</div>
         </p>
     </div>
    );
  }
}

export default App;

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

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

注意：我已经通过修改create-react-app创建了这个项目，并且我在react package.json下添加了proxy来建立节点API之间的连接并做出反应

完整的错误讯息：

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.

Answer 1

您无法呈现state对象（注意：小写，而不是State！），以下内容永远不会有效：

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

相反，拉出以下属性：

class Example extends React.Component {
  constructor () {
    super()
    this.state = {
      messages: ['hi', 'bye']
    }
  }
  
  render () {
    // pull off messages array from state, then map over it to get each message
    const { messages } = this.state 
    return (
      <div>
        {messages.map(message => (
          <div>{message}</div>
        ))}
      </div>
    )
  }
}

ReactDOM.render(
 <Example />, 
 document.getElementById('root')
)

<div id='root'></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 2

首先将this.State重命名为this.state，州定义应为小写。

在app组件中，您在<div /> jsx elemnt中呈现对象，这是不正确的。尝试映射您的消息并为每个实体返回单独的元素：

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

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>
        <div className="App-intro">
          <p>To get started, edit <code>src/App.js</code> and save to reload.</p>
          <div>
           {messages.map(item => <span key={messages.indexOf(item)}>{item}</span>)}
          </div>
         </div>
     </div>
    );
  }

Answer 3

下午m8，

将State更改为state，然后在渲染功能更改中 <div>{this.State}</div>到<div>{this.state.messages}</div> 或者更改为以下内容以更好地控制如何呈现每条消息。

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

此外，您需要更改在axios回调中更新状态的方式，更改此

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]
    })
})

反应中的状态不会呈现在屏幕上

3 个答案:

编辑验证html