myArray.map не является функцией: Попытка установить состояние React с данными из API выборки Javascript - PullRequest
Новая
       25

myArray.map не является функцией: Попытка установить состояние React с данными из API выборки Javascript

0 голосов
/ 11 ноября 2019

Я пытаюсь установить состояние React с данными из базы данных Postgres, используя API извлечения Javascript. Я запутался во многих аспектах, поэтому пытаюсь соединить его вместе.

Сначала установите начальное состояние ... 

let initialClients = [
  {id: 1, firstName: 'Juicy', lastName: 'J'},
  {id: 2, firstName: 'Big', lastName: 'pimpin'},
  {id: 3, firstName: 'Snoop', lastName: 'Dogg'},
];

export default function TestCustomers(){

  const [Clients, setClients] = useState(initialClients);

Хорошо, это работает. Отныне я использую setClients () для установки нового состояния.

Поскольку обещания фактически не дают мне значения, или ... возможность установить значение для использования вне обещания, я полагаю,Я должен попробовать и использовать ждать. Для этого я должен использовать асинхронную функцию? Хорошо. Вот моя попытка (почти полный набор кода): 

export default function TestCustomers(){

  const [Clients, setClients] = useState(initialClients);
  const ref = useRef(false);
  let testData;

  async function setClientsAsync(){

    const response = await fetch('/api/clients');
    const myJson = await response.json();
    console.log(JSON.stringify(myJson));
//    setClients(JSON.stringify(myJson));
//    return JSON.stringify(myJson);

  }

  if (!ref.current) {
    setClientsAsync();

    ref.current = true;
  }

console.log(JSON.stringify(myJson)); возвращает ПРАВИЛЬНЫЙ массив объектов, которые ДОЛЖНЫ быть в состоянии перейти непосредственно в setClients(); ... но когда я пытаюсьраскомментируя строку setClients(JSON.stringify(myJson));, я получаю эту ошибку: Clients.map не является функцией.

Почему? Не похоже, что я передаю обещание. Я не знаю, с чего начать, или не знаю, с чем связана проблема.

console.log(JSON.stringify(myJson)); возвращает это: 

[{"id":1,"firstName":"first1","lastName":"last1"},{"id":2,"firstName":"first2","lastName":"las2"},{"id":3,"firstName":"first3","lastName":"last3"}]

Функция возврата: 

  return (
    <div>
      <button onClick={() => {getNewClients()}}>Get New Clients</button>
      <h2>Clients....</h2>
      <ul>
        {Clients.map(client =>
                     <li key={client.id}>{client.firstName} {client.lastName}</li>
                    )}
      </ul>
    </div>
  );
...