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，名称，值，NSt}）。如果您打算呈现儿童集合，改用数组。在li（在index.js：29）在ul（在index.js：29）中 div（在index.js：26）在App中（在index.js：36）

Answer 1

对象作为React子对象无效（找到：带有键{id，名称，值，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>

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

4 个答案: