代码之家 › 专栏 › 技术社区 › Murat

通过map函数从API获取数据

react-native reactjs

Murat · 技术社区 · 2 年前

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

例如,我有一些从API获得的JSON数据。

{
    "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;
      });
    }

因此,此获取返回一个大列表,其中包含来自第三方API的产品信息。我只想返回价格,这就是我只返回价格值的原因,我想在上面的视图中打印出来。我真的不知道该怎么做。每次运行该函数时,它都会被取消定义。希望有人能帮我。

3 回复 | 直到 2 年前

Inder 2 年前

创建一个新的 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>
    );
  });
}

waffle45 2 年前

未定义的原因是,在函数完成运行之前,窗口正在渲染。在返回视图之前,必须定义一个异步函数。

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();
}, []);

然后可以使用数据[0]。价格

Chris Sandvik 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>
  );
};