0

Есть код, который выводит посты и по клику на пост показывает его полное содержимое.

import React from "react";


type respX = {
    "id": any,
    "userId": any,
    "title": any,
    "body": any,
}

interface PropsI {
}

interface StateI {
    data: respX[];
    changedBody: string
    changedTitle: string
}

export class ComponentPostList extends React.Component<PropsI, StateI> {

    state: StateI = {data: [], changedBody: '', changedTitle: 'Click to choose article'}

    async getPostById(id: any) {
        const myResponse = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
        const myJson = await myResponse.json();
        this.setState({changedBody: myJson.body, changedTitle: myJson.title});
    }

    async componentDidMount() {
        const response = await fetch(`https://jsonplaceholder.typicode.com/posts/`);
        const json = await response.json();
        this.setState({data: json});
    }


    render() {
        return (
            <div className="About">
                <div className="content">
                    <div className="title">{this.state.changedTitle}</div>
                    <div className="article">{this.state.changedBody}</div>
                </div>
                {this.state.data.map(el => (
                    <li onClick={e => this.getPostById(el.id)} key={el.id}>
                        {el.title}
                    </li>
                ))}
            </div>
        );
    }
}

Как правильно передать данные из одного компонента в другой? Чтобы рендер заголовков постов был в одном компоненте,а уже полное содержимое поста в другом компоненте. Эти компоненты находятся на одном уровне:

<ComponentPostList  data={data} onClick=(getPostById) />
<ComponentArticle post={post} />
1

2 ответа 2

0

Вам необходимо создать родительский компонент, например, Posts, который будет визуализировать компоненты ComponentPostList и ComponentArticle. В компоненте Posts следует реализовать логику загрузки данных и обработки щелчка по посту. Также в состоянии компонента Posts должен храниться текущий отображаемый пост (или значение null, если ничего отображать не надо). Компонент Posts после загрузки данных должен передавать их дочернему компоненту ComponentPostList для визуализации. Также из компонента Posts в компонент ComponentPostList надо передать функцию обработки щелчков. Кроме того, из компонента Posts в компонент ComponentArticle следует передать содержимое отображаемого поста.
Таким образом, код вызова дочерних компонентов из компонента Posts будет похож на следующий:

<ComponentPostList data={data} onClick={() => this.getPostById} />
<ComponentArticle post={post} />
0

не углубляясь к код, ответ:

  • через общего родителя. он будет хранить состояние, а манипулировать данными можно через всплытие/поднятие состояния. ссылка на документацию здесь.
  • через <Context>. это по сути, такой же подход, как и 1, но более красивее. родитель будет хранить и раздавать своё состояние, а любые дочерние(!) компоненты могут на это состояние подписываться.
  • state management (к примеру, redux). позволяет хранить состояние всего приложение отдельно и независимо от всего

плюс я заметил, что Вы вешаете обработчики событий на все, созданные Вами <li>, элементы. вместо этого можно повесить один обработчик на родителя в целях производительности.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.