Question

我对JS和ReactJS还是很陌生，我尝试获取一个给我一个JSON对象的终结点，如下所示：

{"IDPRODUCT":4317892,"DESCRIPTION":"Some product of the store"}

我通过此端点获取此JSON对象：

http://localhost:3000/product/4317892

但是我不打算在我的react应用程序中使用它，我想使用这些数据在页面上显示它们

我当前的代码看起来像这样，但是它不起作用，我也肯定不是很好：

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的{{1}}属性，因此无法反应。在您的情况下，无需定义新的undefined并直接使用状态。

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

setState()

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

Answer 3

{postItems["IDPRODUCT"]}

将显示第一个值。您可以对其他值执行相同的操作。或者，您可以输入

{JSON.stringify(postItems)}

关于在App中获取要在此组件中使用的输入，您可以将该输入向下传递到道具，并通过this.props.myInput在此组件中进行访问。在您的应用中，它将如下所示：

<Products myInput={someInput} />

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

3 个答案: