正如标题所说,我正在尝试渲染一个 React 组件,其中包含我通过使用 fetch() 加载从 JSON 中获取的数据。
api 调用工作正常,但我无法呈现数据。
代码如下:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
user: {}
}
}
getUserById(uId) {
fetch(`https://jsonplaceholder.typicode.com/users/${uId}`)
.then( (response) => {
return response.json()
})
.then( (json) => {
return json;
});
}
componentDidMount() {
this.setState({
user: this.getUserById(4)
})
}
render() {
return (
<div>
<h1>User</h1>
<p>ID: {this.state.user.id}</p>
</div>
);
}
}
ReactDOM.render(
<App/>,
document.getElementById("container")
);
<div id="container"></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>
有解决这个问题的想法吗?
最佳答案
问题出在这一行:
<div class="container"></div>
您定义了 class
并通过 getElementById
获取它。
另一个变化是,ajax 调用将是异步的,所以 getUserById
不会立即返回数据,setState
会在状态变量中设置 undefined
值不是从服务器返回的数据。要解决此问题,请在收到响应后执行 setState
。
检查这个:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
user: {}
}
}
getUserById(uId){
fetch(`https://jsonplaceholder.typicode.com/users/${uId}`)
.then( (response) => {
return response.json()
})
.then( (json) => {
this.setState({
user: json
})
});
}
componentDidMount() {
this.getUserById(4);
}
render() {
console.log(this.state.user);
return (
<div>
<h1>User</h1>
<p>ID: hello</p>
</div>
);
}
}
ReactDOM.render(
<App/>,
document.getElementById("container")
);
<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>
<div id="container"></div>
注意:您正在进行 ajax
调用,因此不要在 setState 中调用函数,而是在获得响应后在 .then 中执行 setState,如下所示:
.then(json => {
this.setState({user: json});
});
关于javascript - React - 加载 JSON 并渲染组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42417345/