时间戳

首页 > 解决方案 > 无法在 reactJS 中使用 JSON 填充选择下拉列表

json - 无法在 reactJS 中使用 JSON 填充选择下拉列表

问题描述

我正在尝试使用 JSON 在 reactJS 的下拉“选择”中获取键“名称”及其相应的值。但是当我执行我的代码时它不起作用。我附上了我的代码，请看一下！

我尝试使用 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
    }
]

没有错误信息。虽然所需的结果应该是“选择下拉填充：”请选择其中一个名称

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

标签： jsonreactjsreact-select

解决方案

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

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

// Package.json

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

然后你会这样调用你的 fetch ：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 } 
})

推荐阅读