reactjs 如何在函数内部和函数外部使用变量?

5vf7fwbs  于 2022-12-22  发布在  React
关注(0)|答案(1)|浏览(180)

我尝试使用我的allData变量,这样我就可以使用它内部的数据,并在返回中显示它。有人能帮助我如何在它外部的fetchapi函数内部使用该变量吗?
那个url(random-data-API)有一个地址,我需要解析它,然后在返回的文件中单独打印出来,我尝试使用allData.address,也使用了fetchapi.allData.address,我是新手,我一直在研究如何使用它,但我还没有找到有用的东西

const fetchapi = async () => {
    try {
      setLoading(true); // Antes del fecth
      await axios
        .get("https://random-data-api.com/api/v2/addresses")
        .then((response) => {
          setLoading(false); // loading false luego de mostrar la data
          const allData: Response = response.data;
          console.log(allData);
        });
    } catch (error) {
      setLoading(false); // loading false si sale un error
      console.log(error);
    }

    return allData;
  };

  return (
    <Fragment>
      <div>
        <button onClick={fetchapi}>Fetch Location</button>
        {address ? null : (
          <div
            style={{
              backgroundColor: "#c7c7c7",
              display: "flex",
              flexDirection: "column",
              padding: 16,
              margin: 5,
              borderRadius: 20
            }}
          >
            <p>
              <strong>Address: {Adress here from the allData var}</strong>
            </p>
            <p>
              <strong>City:{city here from the allData var}</strong>
            </p>
            <p>
              <strong>Street Name:{...}</strong>
            </p>
            <p>
              <strong>Zipcode:{...}</strong>
            </p>
          </div>
        )}
      </div>
    </Fragment>
  );
ozxc1zmp

ozxc1zmp1#

您应该声明一个存储allData的状态,类似于setLoading。
然后可以将响应存储到状态setAllData(response.data)中
并在地址字段中使用它,如allData.address

相关问题