Javascript 我可以在React中使用currying进行后续API调用吗？_Javascript_Reactjs_Currying

Javascript 我可以在React中使用currying进行后续API调用吗？

javascript reactjs

Javascript 我可以在React中使用currying进行后续API调用吗？,javascript,reactjs,currying,Javascript,Reactjs,Currying,我正在试着用PokeAPI在React中制作口袋妖怪卡片。我希望卡片有两个面，一个正面，一个背面和扩展的细节。由于API端点的工作方式，每个Pokemon都必须调用其特定端点以获取扩展的详细信息。现在，我正在使用初始api调用（在componentDidMount内部）设置状态，该调用返回pokemon的非详细列表，包括它们的名称和api端点url。该状态存储在一个名为“Cardcontainer”的基于类的容器中，该容器有两个功能组件“frontCard”和“backCard”，它们使用pro

我正在试着用PokeAPI在React中制作口袋妖怪卡片。我希望卡片有两个面，一个正面，一个背面和扩展的细节。由于API端点的工作方式，每个Pokemon都必须调用其特定端点以获取扩展的详细信息。现在，我正在使用初始api调用（在componentDidMount内部）设置状态，该调用返回pokemon的非详细列表，包括它们的名称和api端点url。该状态存储在一个名为“Cardcontainer”的基于类的容器中，该容器有两个功能组件“frontCard”和“backCard”，它们使用props呈现。在Cardcontainer组件上，通过单击事件的HTTP请求检索backCard数据，然后翻转卡片，显示详细信息。一切正常，但我很难把细节放到正确的卡片上。我能用咖喱来解决我的问题吗？不管怎样，我都想保留我当前的设计，但是我可以使用Curry来获得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, { 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，{Component}来自'React'；
从“../Components/Frontcard”导入Frontcard；
从“../Components/Backcard”导入Backcard；
类Cardcontainer扩展组件{
状态={
口袋妖怪：[]，
回传：[]
}
componentDidMount（）{
const xhr=new XMLHttpRequest（）；
常量url=https://pokeapi.co/api/v2/pokemon';
xhr.onload=（）=>{
如果（xhr.status==200）{
const data=JSON.parse（xhr.responseText）；
const pokeList=data.results；
这是我的国家(
{……这个州，
口袋妖怪：口袋妖怪，
}
)
} 
否则{
console.log（'不正常'）
}
}
xhr.open（'GET'，url，true）；
xhr.send（）；
}
handleClick=（e）=>{
const xhr=new XMLHttpRequest（）；
常量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）
这是我的国家(
{
…这个州，
卡背：已加入
}
);
}
xhr.open（'GET'，url，true）；
xhr.send（）；
}
render（）{
返回(
this.state.pokemon.map（（poke，index）=>{
返回(
)
})
)
}
}
导出默认卡片容器；

背卡：

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;

从“React”导入React；
const Backcard=（道具）=>{
const details=道具；
console.log（！details.name？'hi'：details.name.name）
console.log（）
返回(
{details.name！==props.frontName？'hi'：
details.name.name}
)
}
导出默认回退卡；

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

如果您真的不想对React组件进行任何更改，那么您应该在首先检索pokemon列表并从中获取每个pokemon的后续url后，通过调用组件didmount中的n次，将this.state.cardback数组提供给每个pokemon的每个特定端点（坏主意）

我的建议是将数据保存在Cardback组件本身中，这样它就有了自己的状态，您可以将url作为道具传递给Cardback组件，然后在componentDidMount方法中获取相应的数据。

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

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

我刚刚检查了api，你能把URL作为道具传递给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();           
}

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, { 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，{Component}来自'React'；
从“../Components/Frontcard”导入Frontcard；
从“../Components/Backcard”导入Backcard；
类Cardcontainer扩展组件{
状态={
口袋妖怪：[]，
回传：[]
}
componentDidMount（）{
const xhr=new XMLHttpRequest（）；
常量url=https://pokeapi.co/api/v2/pokemon';
xhr.onload=（）=>{
如果（xhr.status==200）{
const data=JSON.parse（xhr.responseText）；
const pokeList=data.results；
这是我的国家(
{……这个州，
口袋妖怪：口袋妖怪，
}
)
} 
否则{
console.log（'不正常'）
}
}
xhr.open（'GET'，url，true）；
xhr.send（）；
}
render（）{
返回(
this.state.pokemon.map（（poke，index）=>{
返回(
)
})
)
}
}
导出默认卡片容器；

背卡

    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;

import React，{useState，useffect}来自“React”；
const Backcard=（道具）=>{
const[data，setData]=useState（{}）；
useffect（（）=>{
const xhr=new XMLHttpRequest（）；
xhr.onload=（）=>{
const backData=JSON.parse（xhr.responseText）；
const joined=this.state.cardBack.concat（backData）
setData（已连接）；
}
xhr.open（'GET'，this.props.url，true）；
xhr.send（）；
}, []);
const details=道具；
console.log（！details.name？'hi'：details.name.name）
console.log（）
雷图