Как сопоставить асинхронный ключ для вызова API - PullRequest
Новая
       6

Как сопоставить асинхронный ключ для вызова API

0 голосов
/ 11 октября 2018

У меня есть 2 класса, App.js и Categories.js.App.js вызвал API и сумел получить имя категории и идентификатор категории в 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 данные возвращают пару через кнопку карты, и я использовал ключ для связи со значениями массива, такими как пара, но я не могу передать значения, чтобы помочь получить значения, необходимые для динамического доступа к 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

1 Ответ

0 голосов
/ 12 октября 2018

Измените onClick на onClick={() => this.getResult(this.props.categoryID[i])}.

Тогда getResult может принять параметр: getResult = async (id) => { ... }

Вызов API: http://callthisapi.com/v1/categories/items?format=json&category=${id}

См. Реакциядокументация для прохождения функций: https://reactjs.org/docs/faq-functions.html

...