Question

我有2个类，App.js和Categories.js。 App.js调用了API，并设法将类别的名称和类别的ID转换为JSON，然后像这样推送数据并将其传输到类别Category的道具中。

Object.keys(data.categories).forEach((category,index) => {
  categories.push(data.categories[index].name);
  categoryIDs.push(data.categories[index].id)
})


<Categories 
   categoryName = { this.state.categoryName }
   categoryID = { this.state.categoryID }
 />

然后在我的Categories类中，数据通过映射按钮返回一对，并且我使用key像一对那样将其与数组值相关联，但是我无法传递这些值来帮助获取动态访问所需的值API

class Categories extends React.Component {


getResult= async () => {


    const api_call = await fetch(`
    http://callthisapi.com/v1/categories/items?format=json&category=1334134&apiKey=${API_KEY}`)

    // Convert response to json
    const data = await api_call.json();

    console.log(data);
}

render() {

    return (

    <div>
    <br /> 
        { 
            this.props.categoryName.map
                ((name,i) => <button key={i} onClick={this.getResult}> {name} {this.props.categoryID[i]} </button>)
        }
    </div>

如您所见，1334134现在是一个硬编码值，但该数字当前与{this.props.categoryID[i]}相关联。我如何允许数字动态更改？我试图通过参数传递值，但此后一切都中断了。

我想要的值在{this.props.categoryID[i]}中，但我无法将其提取到函数中，即tl; dr

Answer 1

将您的onClick更改为onClick={() => this.getResult(this.props.categoryID[i])}。

然后getResult可以接受参数：getResult = async (id) => { ... }

API调用：http://callthisapi.com/v1/categories/items?format=json&category=${id}

有关传递函数的信息，请参见React文档：https://reactjs.org/docs/faq-functions.html

如何映射异步密钥以调用API

1 个答案: