javascript - 无法从 ReactJS 中的数组获取下拉列表

Question

我想在 ReactJS 中的自动完成文本字段中显示城市名称数组。

我能够打印我需要的数组，但是我无法在浏览器的下拉列表中获取列表。

此外，我在浏览器中收到以下错误。

我尝试了不同的方法来检索数据，但未能成功。

retrieveDataAsynchronously(searchText) {
  let _this = this;

  fetch(`http://webapi.myserver.com/api/v3/locations?name=${searchText}`)
    .then(r => r.json())
    .then(json => {
      var cityNames = json.Data.map(current => current.City);
      _this.setState({
        autocompleteData: cityNames
      });
    });  
}  

const json.Data = [
  {
    "Name": "Dale (e)",
    "City": "Dale (e)",
    "StateAbbreviation": "IN",
    "StateName": "Indiana",
    "StateCode": 26,
    "ZipCode": "47523"
  },
  {
   "Name": "Dallas",
   "City": "Dallas",
   "StateAbbreviation": "TX",
   "StateName": "Texas",
   "StateCode": 68,
   "ZipCode": "75202",
  }
];

预期结果是在“自动完成”字段中以下拉列表的形式获取这些城市名称。

我在 brwoser 中看到错误。

未处理的拒绝(TypeError):json.Data.map 不是函数

Answer 1

语法错误

在声明 const json 时确实出现语法错误使用const json.Data .

const json.Data = [
      ^^^^

SyntaxError: Missing initializer in const declaration
    at Module._compile (internal/modules/cjs/loader.js:718:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
    at Module.load (internal/modules/cjs/loader.js:641:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:837:10)
    at internal/main/run_main_module.js:17:11

尝试用以下内容替换:

const json = {
    Data: [
        {
            "Name":"Dale (e)",
            "City":"Dale (e)",
            "StateAbbreviation":"IN",
            "StateName":"Indiana",
            "StateCode":26,
            "ZipCode":"47523"
        },
        {
            "Name":"Dallas",
            "City":"Dallas",
            "StateAbbreviation":"TX",
            "StateName":"Texas",
            "StateCode":68,
            "ZipCode":"75202",
        }
    ]
};

获取名为 json 的响应覆盖您的 json 对象

我看到的第二个问题是json.Data将引用您的提取请求返回，也名为 json ，其中可能不包含 json.Data大批。您将需要重命名 const json，或重命名响应 avoir 名称冲突的 fetch。

fetch(`http://webapi.myserver.com/api/v3/locations?name=${searchText}`)
    .then(r => r.json())
    .then(response_json => {
      var cityNames = json.Data.map(current => current.City);
      _this.setState({
        autocompleteData: cityNames
      });
    });