J'ai créé un state dans le constructeur, et setState dans componentDidmount, lorsque j'essaie de render cet état état à filtrer, il génère une erreur, le serveur im utilisant est {{ X4}}, et toutes les autres choses fonctionnent bien. aidez-moi à résoudre ce problème

App.js (réagir)

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;

Fonction de route que j'appelle de l'API de noeud:

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

Remarque: j'ai créé ce projet en modifiant create-react-app, et j'ai ajouté proxy sous react package.json pour établir la connexion entre l'API du nœud et réagir

Message d'erreur complet:

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.
2
LogaKrishnan 17 avril 2018 à 14:39

3 réponses

Meilleure réponse

Au début, renommez this.State en this.state, la définition de l'état doit être en minuscules.

Dans le composant d'application, vous restituez l'objet dans <div /> jsx elemnt, il est incorrect. Essayez de mapper vos messages et de renvoyer un élément distinct pour chaque entité:

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;

Modifier valider 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>
    );
  }
2
Artem Mirchenko 17 avril 2018 à 12:50

Vous ne pouvez pas restituer l'objet state ( remarque: minuscule , pas State!), Les éléments suivants ne fonctionneront jamais:

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

Au lieu de cela, retirez des propriétés comme les suivantes:

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>
3
vapurrmaid 17 avril 2018 à 12:00

Après-midi m8,

Remplacez State par state, puis changez de fonction de rendu <div>{this.State}</div> à <div>{this.state.messages}</div> ou passez à ce qui suit pour avoir plus de contrôle sur la façon de rendre chaque message.

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

Vous devez également changer la façon dont vous mettez à jour l'état dans le rappel axios, changez cela

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

Pour ça

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]
    })
})
1
TheNickyYo 17 avril 2018 à 12:57