0

изначально в хранилище существует пустой массив, когда я ввожу данные для поиска в полученных по get запросу данных срабатывает со 2-го раза, а при первом нажатии в консоле выводит undefined

SearchForm

    import React, { useState } from 'react'
import './SearchForm.css'
import {FaSearch} from 'react-icons/fa';
import axios from 'axios';
import { useDispatch } from 'react-redux'
import { ArrayOfItemsFound } from '../store/slices/SearcherSlice'

const SearchForm = () => {
  
  const dispatch = useDispatch();

  const [search, setSearch] = useState('');
  const [bookData, setData] = useState([]);

  const searchBook=(evt)=>{
    if(evt.key==="Enter")
    {
      axios.get('https://www.googleapis.com/books/v1/volumes?q='+ search +'&key=AIzaSyAUrWbMHIWA-7gKEhRCU1FzkyAawM7TBJA')
      .then(response => {
        setData(response.data)
      })
      .catch(error => {
        console.error('Ошибка при запросе к API:', error);
      });

      const searchResult = bookData
      dispatch(ArrayOfItemsFound(searchResult))

    }
  }
  return (
    <>
      <div className='search-form'>
        <div className='container'>
          <div className='search-form-content'>
            <div className='search-form'>
              <div className='search-form-elem flex flex-sb bg-white'>
                <input type="text" className='form-control' placeholder='Name of book...'
                  value={search} 
                  onChange={e=>setSearch(e.target.value)}
                  onKeyUp={searchBook}/>
                <button className='flex flex-c'>
                  <FaSearch className='text-light-black' size={28} />
                </button>
              </div>
            </div>
          </div>
        </div>
      </div> 
    </>
  )
}

export default SearchForm

BookList.js

const BookList = () => {
  const {totalItems, items} = useSelector(state => state.searcher.value)


        return (
          <div className='BookList'>
            <div className="container">
              <div className="BookList-content flex flex-column">
                <div className="BookList-amountOfResults text-black">
                  Found {totalItems} results
                </div>
                <div className="BookList-books">
                  {console.log(items)}
                </div>
              </div>
            </div>
          </div>
        )
}

export default BookList

SearcherSlice

    import { createSlice } from '@reduxjs/toolkit'

export const searcherSlice = createSlice({
  name: 'searcher',
  initialState: {
    value: {
      totalItems: '0',
      items: []
    }
  },
  reducers: {
    ArrayOfItemsFound: (state, action) => {
      state.value = action.payload
    }
  }
})

export const { ArrayOfItemsFound } = searcherSlice.actions

export default searcherSlice.reducer

Вывод в консоль

[] // при загрузке страницы
BookList.jsx:17 undefined // после 1 нажатия enter
BookList.jsx:17 (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] // после 2 нажатия enter
7
  • Когда ты выполняешь const searchResult = bookData данные в bookData еще не записаны... Как вариант - делать это нужно "рядом" с setData(response.data)
    – ksa
    Commented 7 сент. 2023 в 11:17
  • сейчас попробую
    – aleshkaaaa
    Commented 7 сент. 2023 в 11:20
  • вы имеете ввиду сразу напрямую после этой строчки сделать так? setData(response.data) dispatch(ArrayOfItemsFound(bookData))
    – aleshkaaaa
    Commented 7 сент. 2023 в 11:23
  • ничего не поменялось(
    – aleshkaaaa
    Commented 7 сент. 2023 в 11:25
  • Так не поменяется... Поскольку Изменение стейта асинхронное действие. Вот так пробуй dispatch(ArrayOfItemsFound(response.data))
    – ksa
    Commented 7 сент. 2023 в 11:55

1 ответ 1

0

В функции searchBook вы отправляете асинхронный запрос на сервер, т.к. он асинхронный, то код выполняется дальше и выполняет строчки

const searchResult = bookData
dispatch(ArrayOfItemsFound(searchResult))

Когда у вас выполняются эти строчки, данные с сервера еще не пришли и не выполнилась строчка setData(response.data). bookData к этому моменту у вас равна [] по этому searchReult=[] соответственно в редьюсер вы передаете массив и searcher.value становиться равным []. В BookList вы пытаетесь взять свойство items у searcher.value, а т.к. оно равно [], то очевидно свойства items у него нет, по этому и получаете undefined.

Когда вы нажимаете второй раз на enter, то bookData (если вы слишком быстро конечно не нажимали, а подождали немного) равна ответу полученному при первом нажатии на enter.

Вам не нужно использовать bookData, все что вам нужно, это вызвать dispatch сразу после того как был получен результат от сервера, то есть в then (где у вас сейчас вызывается setData) и передать в него уже ArrayOfItemsFound(response.data)

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.