Javascript 在文本框中键入pincode时，如何编写react代码以显示pincode中的所有位置？

需要一个react代码API，如下所示。

在这里，当我们在文本框中键入560001时，它应该点击上面的API，从文本框中获取值（560001）并将其分配给变量 例如：

给你

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

const App = () => {
  const [value, setValue] = useState('');
  const [locations, setLocations] = useState([]);

  const handleSubmit = async () => {
     if(value === "") return;

     let response = await axios.get(`https://api2-4ofagodxfq-uc.a.run.app/locality?stateName=KARNATAKA&districtName=BANGALORE&pinCode=${value}`);
     if(response.status === 200) setLocations(response.data);
  }

  return <div>
    <input type="text" onChange={e => setValue(e.target.value)}/>
    <button type="button" onClick={handleSubmit}></button>
    {locations.map((location, index) => {
       return <p key={index}>{location}</p>
    })}
  </div>
}

export default App;

import React，{useState}来自“React”；
从“axios”导入axios；
常量应用=（）=>{
const[value，setValue]=使用状态（“”）；
const[locations，setLocations]=useState（[]）；
const handleSubmit=async（）=>{
如果（值==“”）返回；
let response=等待axios.get(`https://api2-4ofagodxfq-uc.a.run.app/locality?stateName=KARNATAKA&districtName=BANGALORE&pinCode=${value}`）；
if（response.status==200）设置位置（response.data）；
}
返回
setValue（e.target.value）}/>
{locations.map（（位置，索引）=>{
返回
{location}
})}
}
导出默认应用程序；

给你

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

const App = () => {
  const [value, setValue] = useState('');
  const [locations, setLocations] = useState([]);

  const handleSubmit = async () => {
     if(value === "") return;

     let response = await axios.get(`https://api2-4ofagodxfq-uc.a.run.app/locality?stateName=KARNATAKA&districtName=BANGALORE&pinCode=${value}`);
     if(response.status === 200) setLocations(response.data);
  }

  return <div>
    <input type="text" onChange={e => setValue(e.target.value)}/>
    <button type="button" onClick={handleSubmit}></button>
    {locations.map((location, index) => {
       return <p key={index}>{location}</p>
    })}
  </div>
}

export default App;

import React，{useState}来自“React”；
从“axios”导入axios；
常量应用=（）=>{
const[value，setValue]=使用状态（“”）；
const[locations，setLocations]=useState（[]）；
const handleSubmit=async（）=>{
如果（值==“”）返回；
let response=等待axios.get(`https://api2-4ofagodxfq-uc.a.run.app/locality?stateName=KARNATAKA&districtName=BANGALORE&pinCode=${value}`）；
if（response.status==200）设置位置（response.data）；
}
返回
setValue（e.target.value）}/>
{locations.map（（位置，索引）=>{
返回
{location}
})}
}
导出默认应用程序；

以下是我在CodePen上的演示：

[[Codepen](https://codepen.io/DoanThanhNhan/pen/YzXyMLX)

---

以下是我在CodePen上的演示：

[[Codepen](https://codepen.io/DoanThanhNhan/pen/YzXyMLX)

---

谢谢Zeeshan，上面的代码将返回控制台上的对象。我需要所有位置（locaities）要在下面的同一屏幕上打印，submitAnswer已更新。Thnks Zeeshan其抛出一个错误TypeError:locations.map不是更新的函数。您更喜欢哪种粗糙度谢谢Zeeshan，上面的代码将在控制台上返回对象。我需要所有位置（Locaties）要在下面的同一屏幕上打印，提交人已更新。Thnks Zeeshan其抛出一个错误类型错误：locations.map不是更新的函数。您更喜欢哪种粗糙