Ошибка типа: не удается прочитать свойство 'map' неопределенного. Реагировать js

#javascript #reactjs #react-router #jsx

#javascript #reactjs #реагировать-маршрутизатор #jsx

Вопрос:

Эй, ребята, я новичок в react js, и я получаю эту ошибку TypeError: Cannot read property 'map' of undefined , я попробовал консоль.журнал объекта, и он показывает все результаты, но я не могу отобразить его в браузере, так как появляется эта ошибка. В чем может быть причина?

 const search = 'api/posts/search'
const [appState, setAppState] = useState({
    search: '',
    posts: [],
});

const [error, setError] = useState('')

useEffect(() => {
    axiosInstance.get(search   '/'   window.location.search)
        .then((res) => {
            const allPosts = res.data;
            setAppState({ posts: allPosts });
            setError('');
            // console.log(res.data);
        })
        .catch((errors) => {
            setAppState({});
            setError('Something went wrong!')
        })
}, [setAppState])




{/* console.log(appState.posts.results) */}
{appState.posts amp;amp; appState.posts.results.map((post) => {
      return (
               <div key={post.id}>
                  <h5>{post.title}</h5>
               </div>
      )}
})}

Спасибо

1. что делает console.log(appState.posts.results) журналы?

2. Он показывает правильные результаты из серверной части. вот так 0: {id: 11, title: "The previous demo of this website", post_date: "2020-10-14T22:43:31.217511 02:00",…}

3. Ваш начальный appState.posts [] код равен true-y (поэтому проверка appState.posts amp;amp; вообще не помогает), но не имеет results prop (so .map находится на undefined, согласно ошибке). Неясно, действительно ли это соответствует тому, что вы получаете от своего API.

4. appState.posts.results результаты из-за разбивки на страницы, которую я использую с серверной частью, так как это происходит из серверной части. вот так {count: 1, next: null, previous: null, results: Array(1)}

5. Потому что это массив, но реальное значение — это объект. Так что либо это должно быть, например { results: [] } , или null / undefined .

Ответ №1:

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

 {appState.posts amp;amp; appState.posts.results amp;amp; appState.posts.results.map((post) => {
      return (
               <div key={post.id}>
                  <h5>{post.title}</h5>
               </div>
      )}
})}