Question

json中的数据：https://jsonplaceholder.typicode.com/posts

这是我的代码。在运行它之后我在console.log中出错：“对象无效作为React子对象（找到：具有键{userId，id，title，body}的对象。）如果你想渲染一个孩子的集合”。为什么当我在COmpoonentDidMount中的console.log（响应）时，我有我的对象数组但不能在render（）{}中使用它。我做错了什么？

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

  componentDidMount() {  
      var component = this;
      api.fetchInfo() 
        .then(function(response) {
            component.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')
);

Answer 1

这行jsx：

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

要求React呈现一个普通对象。而且它不知道如何为你做这件事。如果您希望将json打印到页面，可以stringify：

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

否则，您可能希望map通过并呈现对您有意义的标记。

Answer 2

问题是由行

引起的

# -- coding: UTF-8 --

您可以将其删除或使用：

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

简而言之，解释如下：

在任何jsx块中，您可以在花括号中嵌入javascript，即<p>{JSON.stringify(this.state.users)}</p>
{}块中的javascript结果必须是：字符串，null或其他有效的jsx对象。如果是其他任何内容，您将看到您看到的错误。

在您的情况下，您还有一个有效的块：

{}

上面的块返回有效的jsx，它是一堆{ this.state.users.map( function(elem) { return <li>{elem.userId}</li> } ) }个元素。这些<li>元素本身具有<li>，可以直接解释为字符串。

如何在react.js

2 个答案: