Получить один объект JSON и использовать его

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, где пользователь сможет набрать идентификатор продукта и получить его, как я могу это сделать?Передача данных из App.js в Products.js, который собирается получить данные и отобразить их

Заранее всем спасибо

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

Answer 2

{postItems["IDPRODUCT"]}

Будет отображаться первое значение. Вы можете сделать то же самое для другого значения. Как вариант, вы можете поставить

{JSON.stringify(postItems)}

Что касается ввода данных в приложении для использования в этом компоненте, вы можете передать этот ввод через реквизиты и получить к нему доступ в этом компоненте через this.props.myInput. В вашем приложении это будет выглядеть так:

<Products myInput={someInput} />

Answer 3

У меня есть 3 имени для одной и той же вещи в вашем js: 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>
);