我正在尝试使用Javascript的Fetch API使用来自Postgres数据库的数据设置React状态。我在很多方面感到困惑，因此尝试将其拼凑起来。

首先，设置初始状态...

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（）设置新状态。

因为承诺实际上并没有给我价值，或者..能够在承诺之外设置使用价值的能力，我想我应该尝试并使用await。为此，我应该使用异步功能？精细。这是我的尝试（几乎全套代码）：

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>
  );