Могу ли я использовать каррирование в React для выполнения последующих вызовов API?

Question

Я пытаюсь сделать карты покемонов в React, используя PokeAPI. Я бы хотел, чтобы у карт было 2 стороны, лицевая сторона и тыльная сторона с расширенными деталями В связи с тем, как работают конечные точки API, каждый отдельный покемон должен вызывать свою указанную конечную точку c, чтобы получить расширенные сведения. Прямо сейчас я устанавливаю состояние с помощью начального вызова API (внутри componentDidMount), который возвращает не детальный список покемонов, включая их имя и URL-адрес конечной точки API. Это состояние хранится в контейнере на основе классов с именем «Cardcontainer», который имеет 2 функциональных компонента: «frontCard» и «backCard», которые отображаются с использованием реквизита. Данные backCard извлекаются через HTTP-запрос по событию click, в компоненте Cardcontainer, и карта переворачивается, раскрывая детали. Все работает, но у меня проблемы с получением подробностей на go на нужную карту. Могу ли я использовать карри для решения моей проблемы? Я бы хотел сохранить свой текущий дизайн несмотря ни на что, но могу ли я использовать карри, чтобы получить все детали в методе componentDidMount? Как бы вы go решили это?

Контейнер карт:

import React, { Component } from 'react';
import Frontcard from '../Components/frontCard';
import Backcard from '../Components/backCard';

class Cardcontainer extends Component {
state= {
    pokemon: [],
    cardBack: []
}

componentDidMount() {
        const xhr = new XMLHttpRequest();
        const url = 'https://pokeapi.co/api/v2/pokemon';

        xhr.onload = () => {
            if(xhr.status === 200) {
                const data = JSON.parse(xhr.responseText);
                const pokeList = data.results;
                this.setState(
                    {   ...this.state,
                        pokemon: pokeList,

                    }
                )
            } 
            else {
                console.log('not ok')
            }
        }

        xhr.open('GET', url, true);
        xhr.send();           
}

handleClick = (e) => {
    const xhr = new XMLHttpRequest();
    const url = `https://pokeapi.co/api/v2/pokemon/${e.currentTarget.firstChild.innerText}`;

    xhr.onload = () => {
        const backData = JSON.parse(xhr.responseText);
        const joined = this.state.cardBack.concat(backData)
        this.setState(
            {
                ...this.state,
                cardBack: joined
            }

        );
    }


    xhr.open('GET', url, true);
    xhr.send();
}

render() {

    return (
        this.state.pokemon.map((poke, index)=>{
            return (
                <div onClick={this.handleClick} 
                    className={"card-container"} 
                    key={index}
                    >
                    <Frontcard name= 
 {this.state.pokemon[index].name}/>
                    <Backcard frontName= 
 {this.state.pokemon[index].name} number={index} name= 
 {this.state.cardBack[index]} />
                </div>
            )
        })
    )
}


}

export default Cardcontainer;

backCard:

import React from 'react';

const Backcard = (props) => {
const details = props;
console.log(!details.name? 'hi':details.name.name)
console.log()

return (
    <div className={"card-back"}>  
        <h4>{details.name!==props.frontName? 'hi': 
details.name.name}</h4>
    </div>
)
}

export default Backcard;

Answer 1

Я не уверен, что вы имеете в виду, используя карри. Карринг - это концепция функции, возвращающей другую функцию, которая может быть выполнена в другой момент времени, и у нее есть снимок переменных родительской функции.

Если обратиться к вашей проблеме, хорошей идеей будет получить данные, необходимые для компонента в том же компоненте. Вы должны передать идентификатор Pokemon или URL-адрес компоненту backCard и выполнить там вызов REST, чтобы получить данные с помощью ловушек и заполнить компонент.

Я только что проверил API https://pokeapi.co/api/v2/pokemon, можете ли вы передать URL-адрес в качестве реквизита компоненту backCard.

CardContainer:

import React, { Component } from 'react';
import Frontcard from '../Components/frontCard';
import Backcard from '../Components/backCard';

class Cardcontainer extends Component {
state= {
    pokemon: [],
    cardBack: []
}

componentDidMount() {
        const xhr = new XMLHttpRequest();
        const url = 'https://pokeapi.co/api/v2/pokemon';

        xhr.onload = () => {
            if(xhr.status === 200) {
                const data = JSON.parse(xhr.responseText);
                const pokeList = data.results;
                this.setState(
                    {   ...this.state,
                        pokemon: pokeList,

                    }
                )
            } 
            else {
                console.log('not ok')
            }
        }

        xhr.open('GET', url, true);
        xhr.send();           
}



render() {

    return (
        this.state.pokemon.map((poke, index)=>{
            return (
                <div            className={"card-container"} 
                    key={index}
                    >
                    <Frontcard name= 
 {this.state.pokemon[index].name}/>
                    <Backcard frontName= 
 {poke.name} number={index} name= 
 {poke.name} url={poke.url} />
                </div>
            )
        })
    )
}


}

export default Cardcontainer;

backCard

    import React, { useState, useEffect }  from 'react';

    const Backcard = (props) => {

const [data, setData] = useState({});
  useEffect(() => {
    const xhr = new XMLHttpRequest();
    xhr.onload = () => {
        const backData = JSON.parse(xhr.responseText);
        const joined = this.state.cardBack.concat(backData)
        setData(joined);
    }
    xhr.open('GET', this.props.url, true);
    xhr.send();

  }, []);

    const details = props;
    console.log(!details.name? 'hi':details.name.name)
    console.log()

    return (
        <div className={"card-back"}>  
            <h4>{details.name!==props.frontName? 'hi': 
    details.name.name}</h4>
        </div>
    )
    }

    export default Backcard;

Answer 2

Если я правильно понял вашу проблему, для каждого покемона есть конечная точка, указывающая c данные (данные, которые вы показываете в компоненте задней карты).

Если вы действительно не хотите делать какие-либо Чтобы изменить компоненты React, необходимо передать массив this.state.cardback, вызвав n-раз в компоненте didmount для каждой указанной конечной точки c для каждого покемона (плохая идея) после первого получения списка покемонов, откуда вы получили последующий URL для каждого покемона.

Мое предложение состояло бы в том, чтобы хранить данные в самом компоненте Cardback, поэтому он имеет свое собственное состояние, вы передаете его в качестве URL-адреса и затем внутри компонента Cardback на componentDidMount. Метод вы получаете соответствующие данные.