填充数组变量从json url没有承诺

Question

嗨，我试图通过将所有数据输入到数组变量来显示ReactJS中json url的数据，但我不能在JSX部分使用数组，因为在渲染时数组尚未填充，我尝试了很多东西，但我总是在一个承诺循环中结束，我需要一个承诺从另一个获得数据。代码:

let arry = [];
  let ar = [];
  async function getdriver() {
    const response = await fetch("https://ergast.com/api/f1/current/drivers.json");
    ar = await response.json();
    ar.MRData.DriverTable.Drivers.forEach((element) => {
      arry.push(element);
    });
    return arry;
  }
  getdriver();
  console.log(arry);// the array is populated but i think it waits for it before showing
  console.log(arry.lenght); //lenght is 0

JSX:

return (
    <div>
      <Menu />
      <div style={{ textAlign: "left" }}>
        <h4>ff</h4>
        <Button >change</Button>
        <br></br>
        <i>{arry[0].code}</i>// error ' Cannot read property 'code' of undefined ' so arry is empty? 
      </div>
    </div>
  );

Answer 1

获取数据是一个副作用，然后您需要将这些数据存储为状态，因此您需要使用两种钩子(假设您正在创建函数组件):

• useEffect
• useState

您的异步代码将在useEffect中调用，当调用完成时，您将使用useState将结果保存为组件的状态。

代码看起来类似于下面的例子(我尽可能多地保留了您的代码，但重命名了一些函数和变量，并添加了一些注释，以使其对尽可能多的其他读者有用):

import { useState, useEffect } from "react";
// this can exist outside the component
// it can even be in a different file
async function fetchDrivers() {
  const response = await fetch(
    "https://ergast.com/api/f1/current/drivers.json"
  );
  const data = await response.json();
  return data.MRData.DriverTable.Drivers;
}
function YourComponent() {
  // we declare the state, initially it's an empty array
  const [drivers, setDrivers] = useState([]);
  // we declare the effect that runs exactly once,
  // when the component is mounted
  useEffect(() => {
    fetchDrivers().then(setDrivers);
  }, []);
  // we print the code for all drivers
  // mapping the drivers array to JSX.
  // notice the key attribute, this is required with map
  // to uniquely identify each element
  return (
    <div>
      <Menu />
      <div style={{ textAlign: "left" }}>
        <h4>ff</h4>
        <Button>change</Button>
        <br></br>
        {drivers.map((driver, index) => (
          <p key={index}>
            <i>{driver.code}</i>
          </p>
        ))}
      </div>
    </div>
  );
}

Answer 2

当你想显示从API获取的数据在第一次渲染时，你应该把API调用在useEffect中，并给出一个空数组作为useEffect的依赖，同时将数组设置为状态值，例如:

 import {useState, useEffect} from 'React';
 function YourComponent(){
  const [array, setArray] = useState([]);
  useEffect(()=>{getDriver().then((array)=>
  {setArray(array)})}
  ,[])
 }

这只是一个例子，在getDriver()中，当你得到API调用的结果后，你应该使用setState()设置array，告诉React在该值改变后重新渲染，但在这里，当你把它放在useEffect中，它只会在第一次渲染时触发。