Почему мой ответ GET не определен, когда я пытаюсь использовать map () - PullRequest
Новая
       33

Почему мой ответ GET не определен, когда я пытаюсь использовать map ()

0 голосов
/ 13 июня 2019

Я хочу принять запрос и отобразить данные в список.По крайней мере, я могу видеть данные в консоли, пока не попытаюсь использовать функцию .map(), и вдруг данные не будут определены.

Вот мой код, 

function App() {

  const [clients, setClients] = React.useState(null);


    React.useEffect(() => {
      fetch('http://localhost:3000/api/client/list')
        .then(results => results.json())
        .then(data => {
          setClients(data.clients);
        });
    }, []);

console.log(clients)

clients.map((client) => (

    <div className="App">
      <header className="App-header">
  <p key={clients._id}>{clients.DisplayName}  </p>
      </header>
    </div>
  ))
}

export default App;

Так что, если я заменю все после console.log(clients), тогда я по крайней мере смогу увидеть свой запрос в консоли и ответ 200 с json на вкладке Сеть

1 Ответ

1 голос
/ 14 июня 2019

Вы извлекаете клиентов из асинхронного сетевого запроса. Эти данные, которые вы извлекаете, недоступны до 2-го цикла рендеринга, вызванного вашим вызовом setClients. Первый раз, когда это представление отрисовывается клиентами, является нулевым. При доступе к clients.map выдается ошибка, поскольку на null нет функции карты. Вы можете использовать логический оператор && для проверки нулей, прежде чем отобразить значение. Кроме того, ваш синтаксис является неполным. Измените свой код на, 


return (
    <div className="App">
      <header className="App-header">
       {clients && clients.map((client) => (<p key={client._id}>{client.DisplayName}</p>)}
      </header>
    </div>
  )

Это гарантирует, что вызов clients.map будет выполняться только тогда, когда клиенты не равны нулю. Этот метод известен как условный рендеринг . Я рекомендую вам прочитать это и другие руководства на actjs.org .

...