我可以在 React 中使用柯里化来进行后续的 API 调用吗？

Question

我正在尝试使用 PokeAPI 在 React 中制作 Pokemon 卡片。我希望卡片有 2 个侧面，一个正面和一个背面，并带有扩展的细节。由于 API 端点的工作方式，每个单独的 Pokemon 都必须调用其特定的端点以获取扩展的详细信息。现在我正在使用初始 api 调用（在 componentDidMount 内部）设置状态，它返回一个不详细的 pokemon 列表，包括它们的名称和 API 端点 url。此状态存储在名为“Cardcontainer”的基于类的容器中，该容器具有 2 个功能组件，“frontCard”和“backCard”，它们使用道具呈现。 backCard 数据通过点击事件的 HTTP 请求在 Cardcontainer 组件上检索，卡片将被翻转，显示详细信息。一切正常，但我无法将详细信息转到正确的卡上。我可以使用柯里化来解决我的问题吗？无论如何，我想保留我当前的设计，但是我可以使用柯里化来获取 componentDidMount 方法中的所有细节吗？你将如何解决这个问题？

卡片容器：

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;

背卡：

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

如果我正确理解了您的问题，那么每个口袋妖怪特定数据（您在 backcard 组件中显示的数据）都有一个端点。

如果你真的不想对你的 React 组件做任何改变，你应该通过调用组件中的 n-times 来提供 this.state.cardback 数组，然后调用每个 pokemon 的每个特定端点（坏主意）首先检索 pokemon 列表，从中获取每个 pokemon 的后续 url。

我的建议是将数据保存在 Cardback 组件本身中，因此它有自己的状态，您将 url 作为 prop 传递，然后在 Cardback 组件中的 componentDidMount 方法中获取相应的数据。

Answer 2

我不确定您所说的使用柯里化是什么意思。 Currying 是一个函数返回另一个函数的概念，该函数可以在不同的时间点执行，它具有父函数变量的快照。

说到你的问题，在同一个组件中获取组件所需的数据是个好主意。您应该将 Pokemon id 或 url 传递给 backCard 组件，并在那里执行 REST 调用，以使用钩子获取数据并填充组件。

我刚刚检查了https://pokeapi.co/api/v2/pokemon api，你可以将 URL 作为 prop 传递给 backCard 组件吗？

卡片容器：

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;

背面卡片

    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;