获取一个 JSON 对象并使用它 reactjs

Question

我对 JS 和 ReactJS 非常陌生，我尝试获取一个端点，它为我提供了一个 JSON 对象，如下所示：{"IDPRODUCT":4317892,"DESCRIPTION":"Some product of the store"}我通过这个端点得到这个 JSON 对象：http://localhost:3000/product/4317892但是我不知道如何在我的反应应用程序中使用它，我想使用这些数据将它们显示在页面上我当前的代码看起来像这样，但它不起作用，而且我肯定也不好：import React, {Component} from 'react';class Products extends Component {    constructor(props){        super(props);        this.state = {            posts: {}        };    };    componentWillMount() {        fetch('http://localhost:3000/product/4317892')            .then(res => res.json())            .then(res => {                this.setState({                    res                })            })            .catch((error => {                console.error(error);            }));    }    render() {        console.log(this.state)        const { postItems } = this.state;        return (            <div>                {postItems}            </div>        );    }}export default Products;在 console.log(this.state) 中有数据，但我现在很困惑，不知道该怎么办既然我在这里，我还有一个问题，我想在我的 App.js 中有一个输入，用户可以在其中输入产品的 id 并获得一个，我该如何做到这一点？将数据从 App.js 传递到 Products.js，后者将获取数据并显示它们

Answer 1

您的状态没有postItems被考虑undefined和反应的属性，因此不会呈现。在您的情况下，无需定义 newconst并直接使用状态。

此外，当您setState()，您需要告诉它应该将值设置为哪个状态属性。

componentWillMount() {

    fetch('http://localhost:3000/product/4317892')

        .then(res => res.json())

        .then(res => {

            this.setState({

                ...this.state, // Not required but just a heads up on using mutation

                posts: res

            })

        })

        .catch((error => {

            console.error(error);

        }));

}

render() {

    console.log(this.state)

    return (

        <div>

            <p><strong>Id: {this.state.posts.IDPRODUCT}</strong></p>

            <p>Description: {this.state.posts.DESCRIPTION}</p>

        </div>

    );

}

Answer 2

我在你的 js 中有 3 个相同的名称：posts、postItems 和 res。React 无法为您确定posts = postItems = res。所以做这样的改变：

——

this.state = {

    postItems: {}

};

——

this.setState({

    postItems: res

});

——

return (

    <div>

        {JSON.stringify(postItems)}

        <div>

            <span>{postItems.IDPRODUCT}</span>

            <span>{postItems.DESCRIPTION}</span>

        </div>

    </div>

);