在react.js应用中出现axios错误

Question

请有人告诉我为什么我会从此应用程序中收到此错误：

index.js：

 const API='http://my-domain.com/api/?format=json' class App extends React.Component{ constructor(props){ super(props); this.state={ data: [], isLoading: false, error: null, }; } componentDidMount(){ this.setState({isLoading: true}); axios.get(API) .then(response => this.setState({data: response.data, isLoading: false})) .catch(response => this.setState({error: response.error, isLoading: false})); } render(){ return ( <div> <p>{this.state.error}</p> <p>{this.state.isLoading ? 'Loading...':'Loaded'}</p> <ul>{this.state.data.map(obj => <li key={obj.id}>{obj}</li>)}</ul> </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> 

这是此应用程序应获取的json：

[{"id":5,"name":"Storey-1","Value":1399511075,"NSt":5},
{"id":6,"name":"Storey-2","Value":1344981250,"NSt":5},
{"id":7,"name":"Storey-3","Value":1363157800,"NSt":5}]

这是我得到的错误：

对象作为React子对象无效（找到：带有键{id，name，Value，NSt}的对象）。 如果要渲染子级集合，请改用数组。 在li（在index.js：29）在ul（在index.js：29）在div（在index.js：26）在App（在index.js：36）

Answer 1

对象作为React子对象无效（找到：带有键{id，name，Value，NSt}的对象）。 如果要渲染子级集合，请改用数组。 在li（在index.js：29）在ul（在index.js：29）在div（在index.js：26）在App（在index.js：36）

这不是axios错误。 尝试将原始对象作为React子组件时引发的React错误。

错误在这一行：

 <ul>{this.state.data.map(obj => <li key={obj.id}>{obj}</li>)}</ul>

不要使用整个obj对象，必须使用这样的对象字段：

<ul>{this.state.data.map(obj => <li key={obj.id}>{obj.name}</li>)}</ul>

Answer 2

您正在通过尝试渲染对象本身的对象数组进行映射：

<ul>{this.state.data.map(obj => <li key={obj.id}>{obj}</li>)}</ul> 。

我假设您要呈现{obj.name}或{obj.Value} ？

Answer 3

我认为错误消息非常清楚。 您正在尝试在对象上渲染，而React不喜欢这样：

<ul>{this.state.data.map(obj => <li key={obj.id}>{obj}</li>)}</ul>

下一步，您可能需要先进行字符串化，然后选择要渲染的属性。 然后，您可以查看响应数据是什么，并决定如何呈现。

<ul>{this.state.data.map(obj => <li key={obj.id}>{JSON.stringify(obj)}</li>)}</ul>

Answer 4

问题是您正在接收一个对象

<ul>{this.state.data.map(obj => <li key={obj.id}>{obj}</li>)}</ul>

与{obj}因此，如果需要整个对象，可以使用JSON.stringify将其转换为字符串，如下所示（但我认为最好将此功能抽象为单独的功能）：

<li key={obj.id}>{JSON.stringify(obj)}</li>