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

oskll

我是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,这将获取数据并显示它们

谢谢大家

目标与赌博

您的州没有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>
    );
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何保存 JSON 对象并在另一个请求中使用它?

破坏一个对象并使用它 - React prop

从输出中提取一个值,然后在下一个任务中使用它

在Spark中,如何从结构中提取数组并使用它创建一个新字段

在java中创建一个通用对象并使用它来创建另一个通用对象

如果对象具有特定属性,则仅使用它们创建一个新对象

提取json数组/对象的第一个和最后一个值

如何一次创建一个对象并在Controller中多次使用它

我在 C 中实现了一个 Map 对象,但使用它会给我一个分段错误

如何从一个块中获取对象并在另一个类或方法中使用它?

从另一个 JSON 对象中提取内部 JSON 对象

声明一个对象是公共的,然后在F#中本地使用它

Javascript:编写一个高阶函数以使用调用它的对象的上下文

如何正确创建一个单例对象并在C ++中使用它?

如何选择一个对象,使用它的子级数组值。

MySQL从数据库中提取一个数字,并在同一查询中使用它

提取一个对象/组出JSON阵列,并将其保存到使用PHP一个新文件。我挂了代码的阵列部分

Dataweave 从数组对象中提取对象并创建一个 json 请求

从模板模板参数中提取第一个模板参数,并在类中使用它?

如何在 Jmeter 中存储提取的 RegEx 并在下一个采样器中使用它

我有一个JSON响应和我卡在使用它

使用scala play-json 2.4.x,如何将json对象的名称提取到另一个对象中?

如何使用 Python 从另一个对象创建一个新的 JSON 对象?

如何编写一个接受类类型作为参数的方法,并使用它来投射一些对象

如何使用多个对象创建一个JSON数组

使用一个 php 函数返回多个 json 对象

使用Powershell的另一个循环JSON对象

如何使用输入变量创建一个json对象

一个从嵌套的JSON类对象中提取文件的递归函数