在 React JS 中通过 Axios 调用第三方 API 的问题

Question

问题陈述：- 我想为用户输入密码分别设置 post-office 下拉菜单。这样，我使用下面提到的api来调用axios。我在下拉列表中获得了所需的 post office 详细信息，但问题是数据的获取永远不会停止，我不断地从 API 获取提取的数据并且它永远不会停止，直到我关闭服务器。下面是我提到的代码。

import React, { useState } from 'react'
import axios from "axios"

export default function Test() {
    const [inputValue, setInputValue] = React.useState("");
    const [districtName, setDistrictName] = React.useState("");
    const [stateName, setStateName] = React.useState("");
    const [dataArray, setDataArray] = React.useState("")
    const onChangeHandler = event => {
        setInputValue(event.target.value);
    };

    if (inputValue.length === 6) {
        console.log(inputValue)
        axios.get("https://api.postalpincode.in/pincode/" + inputValue).then(res => {
            var data = res.data;
            console.log("data: ", JSON.stringify(data))
            setDistrictName(data[0].PostOffice[0].District)
            setStateName(data[0].PostOffice[0].State)
            console.log("data_1: ", districtName + " " + stateName)
            var items = []
            data[0].PostOffice.forEach(element => {
                items.push(<option value={element.Name}>{element.Name}</option>)
                
            });
            setDataArray(items);
            console.log("items:",items);
        })
    }

    return (
        <div>
            <div>
                <label type="text" name="pincode">Pincode</label>
                <input
                    type="text"
                    name="pincode"
                    onChange={onChangeHandler}
                    value={inputValue}
                />
            </div>

            <div>

                <label type="text" name="district">District</label>
                <input
                    type="text"
                    name="district"
                    value={districtName}

                />
            </div>

            <div>
                <label type="text" name="state">State</label>
                <input
                    type="text"
                    name="state"
                    value={stateName}
                />
            </div>

            
                <select>
                    {dataArray}
                </select>

        </div>
    )
}

Answer 1

您可以在 onChangeHandler() 函数中进行以下更改。它应该可以解决问题。

问题是当您在 onChangeHandler() 函数中更新状态 (setInputValue) 时，组件会重新呈现。但是在 if 条件中，你再次更新状态（setDistrictName、setStateName 和 setDataArray ），这会导致某种无限 loop.If 你把 if 条件放在 onChangeHandler() 函数，它将防止您的组件一次又一次地重新渲染。

    const onChangeHandler = event => {
        setInputValue(event.target.value);
        if (event.target.value.length === 6) {
          console.log(inputValue)
          axios.get("https://api.postalpincode.in/pincode/" + event.target.value).then(res => {
              var data = res.data;
              console.log("data: ", JSON.stringify(data))
              setDistrictName(data[0].PostOffice[0].District)
              setStateName(data[0].PostOffice[0].State)
              console.log("data_1: ", districtName + " " + stateName)
              var items = []
              data[0].PostOffice.forEach(element => {
                  items.push(<option value={element.Name}>{element.Name}</option>)
                  
              });
              setDataArray(items);
              console.log("items:",items);
          })
      }
    };

完整的反应代码：

import React, { useState } from 'react'
import axios from "axios"

export default function Test() {
    const [inputValue, setInputValue] = React.useState("");
    const [districtName, setDistrictName] = React.useState("");
    const [stateName, setStateName] = React.useState("");
    const [dataArray, setDataArray] = React.useState("")
    const onChangeHandler = event => {
        setInputValue(event.target.value);
        if (event.target.value.length === 6) {
          console.log(inputValue)
          axios.get("https://api.postalpincode.in/pincode/" + event.target.value).then(res => {
              var data = res.data;
              console.log("data: ", JSON.stringify(data))
              setDistrictName(data[0].PostOffice[0].District)
              setStateName(data[0].PostOffice[0].State)
              console.log("data_1: ", districtName + " " + stateName)
              var items = []
              data[0].PostOffice.forEach(element => {
                  items.push(<option value={element.Name}>{element.Name}</option>)
                  
              });
              setDataArray(items);
              console.log("items:",items);
          })
      }
    };



    return (
        <div>
            <div>
                <label type="text" name="pincode">Pincode</label>
                <input
                    type="text"
                    name="pincode"
                    onChange={onChangeHandler}
                    value={inputValue}
                />
            </div>

            <div>

                <label type="text" name="district">District</label>
                <input
                    type="text"
                    name="district"
                    value={districtName}

                />
            </div>

            <div>
                <label type="text" name="state">State</label>
                <input
                    type="text"
                    name="state"
                    value={stateName}
                />
            </div>

            
                <select>
                    {dataArray}
                </select>

        </div>
    )
}

在 React JS 中通过 Axios 调用第三方 API 的问题

Issue in calling a 3rd party API via Axios in React JS

javascript

json

reactjs

axios