javascript - React - 加载 JSON 并渲染组件

Question

正如标题所说，我正在尝试渲染一个 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>

有解决这个问题的想法吗？

Answer 1

问题出在这一行:

<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});
 });