Question

正如标题所说，我试图渲染一个React组件，其中包含我通过使用fetch（）加载JSON而获取的数据。

api调用工作正常，但我无法呈现数据。

这里是代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

有关解决此问题的任何想法吗？

Answer 1

尝试使用json响应绑定getUserById方法以及用户对象的setState。

class App extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        user: {}
    }
this.getUserById = this.getUserById.bind(this); //add this to your constructor
}

getUserById(uId) {
    fetch(`https://jsonplaceholder.typicode.com/users/${uId}`)
        .then( (response) => {
            return response.json()
        })
        .then( (json) => {
            return json; //setState in here with your ajax request**strong text**
        });
}

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")

Answer 2

我认为你的主要问题是getUserById方法没有返回任何内容，你应该在其中设置状态。那么你对主容器的id有问题，但是我觉得你只是在代码片段中犯了一个错误。

我已经测试了上面的代码，试试看：

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            user: null
        }
    }

    getUserById(uId) {
        fetch(`https://jsonplaceholder.typicode.com/users/${uId}`)
            .then( (response) => {
                return response.json()
            })
            .then( (json) => {
                return json;
            })
            .then((result) => {
              this.setState({user: result});
            });
    }

    componentDidMount() {
        this.getUserById(4)
    }

    render() {
        console.log(this.state.user);
        return (
            <div>
                <h1>User</h1>
                <p>{this.state.user != null ? this.state.user.id : 0}</p>
            </div>
        );
    }
}

ReactDOM.render(
    <App/>,
    document.getElementById("container")
);

React - 加载JSON并渲染组件

2 个答案: