获取一个 JSON 对象并使用它答案

【问题标题】：Fetch one JSON object and use it reactjs获取一个 JSON 对象并使用它
【发布时间】：2025-12-21 22:30:11
【问题描述】：

我对 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，后者将获取数据并显示它们

提前谢谢大家

【问题讨论】：

您使用posts 作为属性初始化state。然后你 setState 一个名为 res 的属性。最后在render 中解构state 并尝试提取名为postItems 的属性。那么哪个是正确的名字呢？请准确发布从console.log(this.state) 记录的内容
感谢@Gilsdav 的回答，我确实纠正了它

标签： javascript json reactjs fetch

【解决方案1】：

您的状态没有postItems 属性，该属性被视为undefined，因此反应不会呈现。在您的情况下，无需定义新的const 并直接使用状态。

另外，当您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>
    );
}

【讨论】：

不需要...this.state，因为setState 会进行部分更新（它会合并对象）。仅当您进行深度嵌套更新时才需要传播先前的状态，并且您只需要对正在更新的部分的父对象/数组进行传播，而不是对整个状态进行传播。

【解决方案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>
);

【讨论】：

谢谢！我现在可以在 div 中拥有 json，但是现在我如何将这个 json 解析为不同的组件，如段落或 div？
@oskll 我已经用一个例子更新了答案。您只需使用 {} 语法将元素显示到您的 HTML 中
谢谢！我试试看！

【解决方案3】：

{postItems["IDPRODUCT"]}

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

{JSON.stringify(postItems)}

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

<Products myInput={someInput} />

【讨论】：