从数据库中获取数据的条形码

问题描述

export default function BarCode()  {

const [hasPermission,setHasPermission] = useState(null);
  const [scanned,setScanned] = useState(false);
  const [data,setData] = useState();
  const [value,setValue] = useState();

  updateSearch = (data) => {
    axios
      .get(
        `https://api.edamam.com/api/food-database/v2/parser?upc==${data}&app_id=2626c70d&app_key=0c0f87ae4e5437621363ecf8e7ea80ae&page=20`
      )
      .then((res) => {
        setState({ value: console.log(res.data.hints) });
      })
      .catch((error) => {
        console.log(error.response.value);
      });
  };

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

  const handleBarCodeScanned = ({ type,data }) => {
    setScanned(true);
    setData(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}
      >
        {scanned && (
          <Button
            title={"Tap to Scan Again"}
            onPress={() => setScanned(false)}
          ></Button>
        )}
      </BarCodeScanner>
    </View>
  );
}

大家好，我正在尝试使用条形码扫描仪通过 axios 从 Edamam 数据库 API 获取食物数据，但在我运行代码时，控制台上没有任何显示。以及如何放置 If 语句，以便如果食物不在数据库中，则会显示警告。

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

解决方法

在 catch 方法中，您可以捕获 HTTP 状态代码，例如：

axios(...)
.catch((err) => {
   if (error.response) {
      console.error(error.response.status); //http error status code
    } else if (error.request) {
      console.error(error.request); //we have not any response
    } else {
      console.error(error.message); //api call failed
    }})

然后你可以创建一个状态来存储响应，如果你得到 404 错误，将其设置为一个空数组并通过条件渲染显示相关错误，伪代码：

function Test() {
  const [data,setData] = useState(undefined);
  const [isLoading,setIsLoading] = useState(true);

  useEffect(() => {
    axios(...)
      .then(({ data }) => setData(data))
      .catch((err) => {
        if (error.response && error.response.status === 404) setData([]);
        else setData(undefined);
      })
      .finally(() => setIsLoading(false));
  },[]);

  if (!isLoading && data.length <= 0) return <>not found! </>;
  if (!isLoading && !data) return <>an error occured </>;
  if (isLoading) return <>Loading...</>;
  return <>{JSON.stringify(data)}</>;
}

注意：有一些很棒的工具可以管理 API 调用，例如 SWR 和 react-query。