无法在 reactJS 中使用 JSON 填充 select 下拉列表

Question

我正在尝试使用 reactJS 的下拉列表 "Select" 中的 JSON 获取键 "name" 及其对应的值。但是当我执行我的代码时它不起作用。我附上了我的代码，请看一下！

我尝试使用 componentDidMount 通过 API 调用来获取数据。我是初学者，所以我想弄清楚有什么方法可以让它发挥作用。

class devName extends Component {
  state = {
    names: [],
    selectedName: "",
    validationError: ""
  }

  componentDidMount() {
    fetch("http://127.0.0.1:8080/dashboard/get_names")
      .then((res) => {
        return res.json();
      })
      .then(data => {
        let namesFromAPI = data.map(name => { return { value: name, display: name } })
        this.setState({ names: [{ value: '', display: '(Select the site)' }].concat(namesFromAPI) });
      }).catch(err => {
        console.log(err);
      });
  }

  render() {
    return (
      <div className="wrapper">
        <div className="form-wrapper">
          <Toolbar />
          <form className="form">
            <label className="label1">Select Name from the drop down</label> <hr />
            <div>
              <Select 
                value={this.state.selectedName}
                onChange={(e) => this.setState({selectedName: e.target.value, validationError: e.target.value === "" ? "You must select a site name" : ""})}>
                {/* placeholder="Loading Site List..." > */}
                {this.state.names.map((name) => <option key={name.value} value={name.display}>{name.display} </option>)}
              </Select>
              <div style={{color: 'red', marginTop: '5px'}}>
              {this.state.validationError}
              </div>
              <br />
            </div>
            <label className="label1">Create New Name From Template</label>
            <hr />
            <div className="addButton">
              <button type="Submit">Add</button> <hr />
            </div>
            <div className="submitButton">
              <button type="submit">Submit</button>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

export default devName;

JSON 代码看起来像：

[
    {
        "type": "state",
        "id": 2131,
        "temporaryEle": {},
        "name": "First Unit#1234 TON" .. and so on
    }
]

没有错误信息。虽然期望的结果应该是 "Select Drop Down populates with : " Select 名字之一

First Unit#1234 TON
Second Unit#8934 QON
Third Unit#6534 JON

Answer 1

编辑： 我已经阅读了您的一条评论，您似乎在获取时遇到了 CORS 问题。

在您的 package.json 文件中添加 baseurl 作为代理

// Package.json

{
  ...other configs,
  "proxy": "http://127.0.0.1:8080"
}

然后你会像这样调用你的提取：fetch('/dashboard/get_names').then((res) => {...})

供您查看的资源：

https://create-react-app.dev/docs/proxying-api-requests-in-development/

旧：

根据您的 JSON 数据，在 componentDidMount

中映射数据时，您可能需要对对象进行更深层次的解构

let namesFromAPI = data.map(({name}) => { 
  return { value: name, display: name } 
})

// OR

let namesFromAPI = data.map(name => { 
  return { value: name.name, display: name.name } 
})

Answer 2

在名称参数上使用解构，当你将它包装在 () 中时，你可以隐式地 return 来自箭头函数的对象 data.map(({name}) => ({ value: name, display: name }))

无法在 reactJS 中使用 JSON 填充 select 下拉列表

Not able to populate the select drop down with JSON in reactJS

json

reactjs

react-select