使用 axios 和条形码扫描仪从 API 获取数据

问题描述

export default function App() {
  const [hasPermission,setHasPermission] = useState(null);
  const [scanned,setScanned] = useState(false);
  const [data,setData] = useState("");

  useEffect(() => {
    (async () => {
      const { status } = await BarCodeScanner.requestPermissionsAsync();
      setHasPermission(status === "granted");
    })();
  },[]);

  const handleBarCodeScanned = ({ data }) => {
    setScanned(true);
    alert(`Bar code with data ${data} has been scanned!`);
    axios
      .get(
        `https://api.edamam.com/api/food-database/v2/parser?ingr=${data}&app_id=2626c70d&app_key=0c0f87ae4e5437621363ecf8e7ea80ae&page=20`
      )
      .then((res) => {
        setData(console.log(res.data.hints));
      })
      .catch((error) => {
        console.log(error.response.data);
      });
  };

  if (hasPermission === null) {
    return <Text>Requesting for camera permission</Text>;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }

  return (
    <View style={styles.container}>
      <BarCodeScanner
        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
        style={StyleSheet.absoluteFillObject}
      />
      <Text>{data}</Text>
    </View>
  );
}

您好，此应用的目标是让用户扫描条形码并从数据库中挑选食物，我正在尝试使用 axios 和 upc 代码获取数据使用 Barcode Scanner，目前当我运行代码时，它给了我这个错误：Objects are not valid as a React child (found: object with keys {data}). If you meant to render a collection of children,use an array instead.

API 文档链接：https://developer.edamam.com/food-database-api-docs 条码扫描器文档链接：https://docs.expo.io/versions/latest/sdk/bar-code-scanner/

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）