0

Есть такой код, который выводит список постов:

import React from "react";


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

interface PropsI {
}

interface StateI {
    data: respX[];
}

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

    state: StateI = {data: []}

    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">
                {this.state.data.map(el => (
                    <li key={el.id}>
                        {el.title}
                    </li>
                ))}
            </div>
        );
    }
}

Как мне при клике на 1 title вывести его body? Или как хотя бы вывести в консоль id элемента, по которому мы кликнули? Вообще желательно при клике на каждом посте (клик на li) делать запрос на отдельные пост например https://jsonplaceholder.typicode.com/posts/1 - где 1 - номер поста.

0

3 ответа 3

2

Вот возможный подход:

  1. решите, где в state хранить, отображать ли body каждого элемента. Скажем, раз у вас state.data – массив объектов типа respX, можно ввести в каждом элементе опциональный флаг isBodyShown?: boolean (надо будет расширить тип) или хранить флаги отдельно – не в state.data, а в отдельном массиве
  2. расширьте шаблон чем-то в духе

                <li key={el.id}>
                    {el.title} {el.isBodyShown ? el.body : ''}
                </li>
    

    (тут я добавил plain text, с вёрсткой, думаю, разберётесь)

  3. добавьте метод для тогглинга isBodyShown по id элемента, навесьте на обёртку для {el.title}

Вроде всё довольно прямолинейно, но если что-то непонятно, уточните, что.

2
  • @xydope в смысле будет лишний ререндеринг?
    – YakovL
    31 янв 2020 в 22:18
  • 1
    удалил свои коменты, т.к. ерунду написал, не будет лишнего рендеринга. Мы же для этого в реакте ключи элементам массива назначаем. Реакт, при изменении стейта, сравнивает компоненты и рендерит только те, которые изменяются.
    – xydope
    3 фев 2020 в 14:02
1
// Делаем компонент, который возвращает элемент списка. Есть стейт отображения body (по дефолту false), принимает пропсы title, body
class ListItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            bodyDisplayed: false  // стейт отображения
        }
    }
    // функция клика, которая изменяет стейт компонента.
    handleClick() {
        this.setState({ bodyDisplayed: !this.state.bodyDisplayed });
    }

    render() {
       //возвращаем элемент списка, если bodyDisplayed: false, то второй элемент не отрисовывается.
        return (
            <li>
                <span onClick={() => this.handleClick()}>{this.props.title}</span>
                {this.state.bodyDisplayed && <div>{this.props.body}</div>}
            </li>
        )
    }
}

// это ваш мейн, который отрисовывает список и получает данные с сервера.
function App() {
    return (
        <ul>
            {myData.map((dataItem) => <ListItem title={dataItem.title} body={dataItem.body} key={dataItem.key} />)}
        </ul>
    )
}

ReactDOM.render(<App />, document.getElementById("root"));
1
  • так у меня показываюстя все body. Мне нужно при клике на кажждом посте (клик на li) делать запрос на отдельные пост например jsonplaceholder.typicode.com/posts/1 - где 1 - номер поста. 2 фев 2020 в 11:28
1
async loadPost(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});
    }

 <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.loadPost(el.id)} key={el.id}>
                        {el.title}
                    </li>
            ))}
1
  • если проблема решена, стоит принять какой-нибудь ответ – свой или наиболее полезный чужой
    – YakovL
    5 фев 2020 в 14:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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