javascript - 在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}]

这是我收到的错误:

Objects are not valid as a React child (found: object with keys {id, name, Value, NSt}). If you meant to render a collection of children, use an array instead. in li (at index.js:29) in ul (at index.js:29) in div (at index.js:26) in App (at index.js:36)

Answer 1

Objects are not valid as a React child (found: object with keys {id, name, Value, NSt}). If you meant to render a collection of children, use an array instead. in li (at index.js:29) in ul (at index.js:29) in div (at index.js:26) in App (at 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>