javascript - how to work with json in react.js - Stack Overflow

admin管理员组

文章数量:1406312

Here data in json :

Here my code. After running it i got error in console.log: "Objects are not valid as a React child (found: object with keys {userId, id, title, body}). If you meant to render a collection of children". Why when i console.log(response) inside COmpoonentDidMount i have my array of objects but can't use it inside render() {}. What im doing wrong?

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            users: []
        }
    }

  ponentDidMount() {  
      var ponent = this;
      api.fetchInfo() 
        .then(function(response) {
            ponent.setState( { users: response } );
        });
  }

  render() { 
    //console.log('here' + this.state.users);
    return (
      <ul>

        <p>{this.state.users}</p>
        {
            this.state.users.map(
                function(elem) {
                   return <li>{elem.userId}</li> 
                }
            )
        }
      </ul>
    )
  }
}


ReactDOM.render(
  <App />,
  document.getElementById('app')
);

Here data in json : https://jsonplaceholder.typicode./posts

Here my code. After running it i got error in console.log: "Objects are not valid as a React child (found: object with keys {userId, id, title, body}). If you meant to render a collection of children". Why when i console.log(response) inside COmpoonentDidMount i have my array of objects but can't use it inside render() {}. What im doing wrong?

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            users: []
        }
    }

  ponentDidMount() {  
      var ponent = this;
      api.fetchInfo() 
        .then(function(response) {
            ponent.setState( { users: response } );
        });
  }

  render() { 
    //console.log('here' + this.state.users);
    return (
      <ul>

        <p>{this.state.users}</p>
        {
            this.state.users.map(
                function(elem) {
                   return <li>{elem.userId}</li> 
                }
            )
        }
      </ul>
    )
  }
}


ReactDOM.render(
  <App />,
  document.getElementById('app')
);

• javascript
• json
• reactjs
• jsx

Share Improve this question Follow edited May 22, 2017 at 9:32 nosh 60044 silver badges1616 bronze badges asked May 22, 2017 at 9:25 Vasyl GutnykVasyl Gutnyk 5,03933 gold badges3737 silver badges3838 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

This line of jsx:

<p>{this.state.users}</p>

is asking React to render a plain object. And it doesn't know how to do that for you. If you want the json to be printed to the page, you can stringify it:

<p>{JSON.stringify(this.state.users)}</p>

Otherwise, you might want to map through and render markup that makes sense for you.

The problem is caused by the line

<p>{this.state.users}</p>

You could remove it OR use:

<p>{JSON.stringify(this.state.users)}</p>

Briefly, the explanation is this:

• Inside any jsx block, you can embed javascript inside curly braces i.e. {}
• The result of the javascript inside the {} block must be: a string, null or another valid jsx object. If it is anything else, you'll see the error you saw.

In your case, you also have a valid block:

    {
        this.state.users.map(
            function(elem) {
               return <li>{elem.userId}</li> 
            }
        )
    }

The block above is returning valid jsx which is a bunch of <li> elements. Those <li> elements themselves have an {elem.userId} which can be directly interpreted as a string.

本文标签： javascripthow to work with json in reactjsStack Overflow