Фильтрация поиска с помощью react и django
Я хочу сделать фильтрацию поиска, используя React и django. Со стороны Django это работает, но во фронтенде Стоит мне набрать любое слово, как я тут же получаю [объект, объект] внутри панели. Может ли кто-нибудь направить меня
Спасибо
в Articles.js
export const Articles = () => {
const [blogs, setAppState] = useState([]);
let navigate = useNavigate();
const [data, setData] = useState({ search: '' });
const goSearch = (e) => {
navigate.push({
pathname: '/search/',
search: '?search=' + data.search,
});
window.location.reload();
}; return (
<div className="wrap mb-4">
<div className="search">
<input type="text" className="searchTerm" placeholder="What are you looking for?"
value={data.search}
onChange={(newValue) => setData({ search: newValue })}
onSubmit={() => goSearch(data.search)}/>
<button type="submit" className="searchButton">
<i className="fa fa-search"></i>
</button>
</div>
</div>)
в Search.js
export const Search = () => {
const search = 'search';
const [appState, setAppState] = useState({
search: '',
posts: [],
});
useEffect(() => {
axiosInstance.get(search + '/' + window.location.search).then((res) => {
const allPosts = res.data;
setAppState({ posts: allPosts });
console.log(res.data);
});
}, [setAppState]);return (
<div className="card">
{appState.posts.map((post) => (
<div key={appState.id}>
<div className="card-body p-3">
<h5 className="mb-3">{appState.title.substr(0, 35)}...</h5>
<h6 className="mb-3">By: {appState.author}</h6>
<strong>At</strong><span className="text-dark">{appState.published}</span>
<p >{appState.content.substr(0, 100)}...</p>
<Link to={`/blog/${appState.slug}`}>Go to the Article</Link>
</div>
</div>
))};
</div>
);
};