通过 map 函数从 API 获取数据

Question

我运行遇到了一个我已经研究了好几天的问题，不幸的是我无法自己解决。我正在尝试创建一个显示来自 API 的一些信息的视图。但是每次我映射这个项目时，我都想做另一个 API 调用来检查该产品的实时价格。

所以我有一些 JSON 数据，我从 API 得到的数据。

{
    "id": 1,
    "name": "test product",
    "productid": "73827duf"    
},
{
    "id": 2,
    "name": "test product2",
    "productid": "734437dde"    
}

所以我在我的应用程序中使用以下代码显示此数据：

{item.products.map((products) => {
     return (
        <View
           key={products.id}
        >
             <Text
                 style={{
                    fontSize: FONTS.body3,
                    paddingLeft: 10,
                 }}
             >
                   {products.name}
                   {getProductPriceJumbo(
                       products.productid
                   )}
             </Text>
       </View>
     );
})}

所以我想运行每次从另一个 API 获取数据的函数。我发送 productID 是因为这是我需要调用此 API 的唯一信息。你可以在下面看到这个函数：

function getProductPriceJumbo(id) {
   fetch("https://---/test.php?id=" + id + "/", {
      method: "GET",
   })
      .then((response) => response.json())
      .then((data) => {
          return data[0].price;
      });
    }

因此，此提取 return 是一个包含来自第三方 API 的产品信息的大列表。我只想 return 价格，这就是为什么我只 return 价格值并且我想在上面的视图中打印出来的原因。我真的不知道该怎么做。每次我运行时，我都会从函数中得到 undefined 。希望有人能帮我解决这个问题。

Answer 1

您未定义的原因是 window 在函数完成运行之前呈现。在 return 您的视图之前，您将定义一个异步函数。

const [data, setData] = useState([])
const [loading, setLoading] = useState(true);

useEffect(() => {
   const fetchData = async () =>{
   setLoading(true);
   try {
          const {data: response} = await axios.get('API URL');
          setData(response);
   } catch (error) {
       console.error(error.message);
   }
     setLoading(false);
   }

   fetchData();
}, []);

然后就可以使用data[0].price;

Answer 2

您可能希望将您的单个产品放入其自己的组件中，以处理获取并将价格设置为该产品视图本地的状态值。以下是如何执行此操作的完整示例：

import { useState, useEffect } from "react";

const Product = ({ product }) => {
  const [price, setPrice] = useState("Price loading...");

  useEffect(() => {
    fetch("https://---/test.php?id=" + product.productid + "/", {
      method: "GET"
    })
      .then((response) => response.json())
      .then((data) => {
        setPrice(data[0].price);
      });
  }, [product]);

  return (
    <View>
      <Text
        style={{
          fontSize: FONTS.body3,
          paddingLeft: 10
        }}
      >
        {product.name}
        {price}
      </Text>
    </View>
  );
};

const App = () => {
  const item = {
    products: [
      {
        id: 1,
        name: "test product",
        productid: "73827duf"
      },
      {
        id: 2,
        name: "test product2",
        productid: "734437dde"
      }
    ]
  };

  return (
    <div>
      {item.products.map((product) => (
        <Product key={product.id} product={product} />
      ))}
    </div>
  );
};

或者，您可以使用 Promise.all 在映射您的产品之前获取所有价格值：

import { useState, useEffect } from "react";

const App = () => {
  const [item] = useState({
    products: [
      {
        id: 1,
        name: "test product",
        productid: "73827duf"
      },
      {
        id: 2,
        name: "test product2",
        productid: "734437dde"
      }
    ]
  });

  const [products, setProducts] = useState([]);

  useEffect(() => {
    Promise.all(
      item.products.map(async (product) => {
        const response = await fetch(
          `https://---/test.php?id=${product.productid}/`
        );
        const data = await response.json();
        return {
          ...product,
          price: data[0].price
        };
      })
    ).then((products) => setProducts(products));
  }, [item]);

  return (
    <div>
      {products.map((product) => {
        return (
          <View key={product.id}>
            <Text
              style={{
                fontSize: FONTS.body3,
                paddingLeft: 10
              }}
            >
              {product.name}
              {product.price}
            </Text>
          </View>
        );
      })}
    </div>
  );
};

Answer 3

创建一个新的 Price 组件来显示价格

function Price({ id }) {
  const [price, setPrice] = useState(0);

  useEffect(() => {
    function getProductPriceJumbo(id) {
      fetch("https://---/test.php?id=" + id + "/", {
        method: "GET"
      })
        .then((response) => response.json())
        .then((data) => {
          setPrice(data[0].price);
        });
    }

    getProductPriceJumbo(id);
  },[]);

  return <Text>{price}</Text>;
}

你的.map会变成

{
  item.products.map((products) => {
    return (
      <View key={products.id}>
        <Text
          style={{
            fontSize: FONTS.body3,
            paddingLeft: 10
          }}
        >
          {products.name}
          <Price id={products.productid} />
        </Text>
      </View>
    );
  });
}

通过 map 函数从 API 获取数据

Get data from API by map function

reactjs

react-native