изначально в хранилище существует пустой массив, когда я ввожу данные для поиска в полученных по 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
const searchResult = bookData
данные вbookData
еще не записаны... Как вариант - делать это нужно "рядом" сsetData(response.data)
dispatch(ArrayOfItemsFound(response.data))