этот вызов ax ios api возвращает пустой массив для вызова, но второй возвращает значение - PullRequest
Новая
       5

этот вызов ax ios api возвращает пустой массив для вызова, но второй возвращает значение

0 голосов
/ 05 февраля 2020

Я пытаюсь использовать контекст ниже, чтобы получить данные из API, а затем передать их другим компонентам. Данные взяты из unspla sh, поэтому я хотел бы сначала отфильтровать их, используя ключевое слово, заданное пользователем. Однако первый массив, возвращаемый функцией, пуст, но если я его укажу console.log (), я получу все данные, как и ожидалось 

import React, {useState, createContext} from 'react';
import axios from 'axios';

export const ImageContext = createContext();

export const ImageContextProvider = ({children}) => {

const [images, setImages] = useState([]);
const count = 15;
const start = 1;

const getImages = async (keyword) => {
    await axios.get(`api/photos?count=${count}&start=${start}&keyword=${keyword}`)
        .then(res => setImages(res.data.results));

}

return ( 
    <ImageContext.Provider value={{images, getImages: getImages }}>
        {children}
    </ImageContext.Provider>
 );
 }

Это компонент, который передает ключевое слово в контекст, который будет использоваться для получения данных из API 

 import React, { useState, useContext} from 'react';
  import { ImageContext } from '../../Context/ImageContext';

  export const SearchBar = () => {
      const { getImages, images } = useContext(ImageContext);
      const[keyword, setKeyword] = useState('');

      const searchImages = async (e) => {
      e.preventDefault();
      await getImages(keyword);
      console.log(images);
   }

    return ( 
    <form onSubmit={searchImages}>
        <input type='text' placeholder='Search Images' value={keyword} onChange={(e) => 
        setKeyword(e.target.value)}/>
        <input type='submit'/>
    </form>
 );
 }

Ответы [ 2 ]

1 голос
/ 05 февраля 2020

Вы почти на месте:)

Поскольку вы используете перехватчики React, вам нужно useEffect, чтобы можно было отправлять Http-запрос. Это эквивалентно `componentDidMount.

Как его использовать? 
import React, {useState, createContext, useEffect} from 'react';

useEffect(() => {
    const result =  axios.get(`api/photos?count=${count}&start=${start}&keyword=${keyword}`)
        .then(res => setImages(res.data.results));  // remember to update your state


  }, []);  // don't forget to pass an empty array
0 голосов
/ 05 февраля 2020

Взгляните на вашу getImages() функцию: 

const getImages = async (keyword) => {
  await axios.get(`api/photos?...`).then(...);
}

Если я прав, это неправильная конструкция, поскольку вы микшируете и await и then(). Кроме того, ваш getImages() не возвращает значение. Я думаю, что следующее решает вашу проблему: 

const getImages = async (keyword) => {
  const res = await axios.get(`api/photos?...`);
  setImages(res.data.results);
  return res.data.results;
}
...