React useEffect не может прочитать свойство 'map' неопределенного

#javascript #reactjs #react-hooks #es6-promise

#javascript #reactjs #реагирующие хуки #es6-обещание

Вопрос:

 import { handleResponse, handleError } from "./apiUtils";
const baseUrl = process.env.REACT_APP_API_URL;




export  function getAllNotes() {
  return  fetch(baseUrl   "/notes", {
    method: "GET",
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    }
  
})
  .then(res =>res.json())
  .then(data=>console.log(data))
}

 export async function handleResponse(response) {
  if (response.ok) return response.json();
  if (response.status === 400) {
    // So, a server-side validation error occurred.
    // Server side validation returns a string error message, so parse as text instead of json.
    const error = await response.text();
    throw new Error(error);
  }
  throw new Error("Network response was not ok.");
}

// In a real app, would likely call an error logging service.
export function handleError(error) {
  // eslint-disable-next-line no-console
  console.error("API call failed. "   error);
  throw error;
}

Я пытаюсь изучить функциональные компоненты react и освоиться с перехватчиками React. Я импортирую функцию из Api.js страница и запустить ее внутри useEffect. Предполагается, что функция попадает на мой серверный сервер, который извлекает данные из mongo Atlas и отправляет их на мой интерфейс для отображения. Данные представляют собой массив из 4 объектов. Я не могу отобразить его, потому что, когда компонент отображает тестовую переменную, она не определена. Я долгое время пытался это понять. Это было бы огромной помощью, и, пожалуйста, объясните не очень техническим способом, я с трудом понимаю очень технические термины. Спасибо!

 import React, {useState, useEffect} from 'react';
import {getAllNotes} from '../api/authorApi'

function CourseList(props) {
  const [test, setTest] =useState([])
  
  useEffect(()=>{
      getAllNotes().then(_test=> setTest(_test))
  }, []);
  return (
    <table className="table">
      <thead>
        <tr>
          <th>Title</th>
          <th>Author ID</th>
          <th>Category</th>
        </tr>
      </thead>
      <tbody>
        {test.map(course => {
          return (
            <tr key={course.user_id}>hi
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

1. Проблема в getAllNotes функции, а не в предоставленном коде (скорее всего)

2. Этот код, кажется, в порядке. Может быть, что-то не так внутри getAllNotes?

3. `тестовая переменная не определена` Ну, изначально значение представляет собой пустой массив, который не является неопределенным, затем вы устанавливаете его с помощью _test Так что проблема в том, что _test это не то, что вы ожидаете

4. это функция, импортируемая из другого файла: функция экспорта getAllNotes() { возвращает выборку(baseUrl «/notes», { метод: «GET», заголовки: { ‘Accept’: ‘application / json’, ‘Content-Type’: ‘application /json’ } }) .затем(res =>res.json()) .затем(data=>console.log(данные)) }

5. Пожалуйста, обновите свой вопрос дополнительным кодом. Кроме того, вы должны проверить res.ok запрос на выборку, чтобы убедиться, что выборка прошла успешно. developer.mozilla.org/en-US/docs/Web/API/Fetch_API /…

Ответ №1:

Изменений немного, вы должны вернуть обещание.

Пример кода:

 import React, { useState, useEffect, Fragment } from 'react';

const getNotes = () => {
  return new Promise (
    (resolve, reject) => 
   fetch('https://jsonplaceholder.typicode.com/todos')
   .then(data => resolve(data.json()))
   .catch(err => reject(err))
   )  
}

const ToDos = () => {
  const [toDos, setToDos] = useState([]);
  
  useEffect(() => {
    getNotes().then( data => setToDos(data))
  }, []);

  const renderData = () => toDos.map((toDo) => <li>title: { toDo.title } </li>)
  return (
    <Fragment>
      <ul>
      {renderData()}
      </ul>
    </Fragment>
  )
}

export default ToDos;

В вашем случае функция ничего не возвращает getNotes после завершения вызова API, следовательно, test не определено, в результате это приводит к ошибке: Cannot read property 'map' of undefined .

фрагмент рабочего кода:https://codesandbox.io/s/react-playground-forked-bwt89?file=/ToDoSample.jsx