Невозможно заполнить выпадающий список с помощью JSON в ReactionJS - PullRequest
Новая
       10

Невозможно заполнить выпадающий список с помощью JSON в ReactionJS

0 голосов
/ 21 октября 2019

Я пытаюсь получить ключ "name" и соответствующее ему значение, используя JSON в выпадающем меню "Select "actJ. Но это не работает, когда я выполняю свой код. Я приложил свой код, пожалуйста, посмотрите!

Я пытался использовать 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 CODE LOOK LIKE: 

[
    {
        "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

Ответы [ 2 ]

0 голосов
/ 21 октября 2019

Использование деструктурирования по параметру имени, вы можете неявно возвращать объект из функции стрелки при переносе его в () data.map(({name}) => ({ value: name, display: name }))

0 голосов
/ 21 октября 2019

Редактировать: Я прочитал один из ваших комментариев, и похоже, что у вас проблемы с CORS при получении.

Добавьте baseurl в качестве прокси в ваш файл package.json 

// 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-запросы-в разработке /

Старый:

В соответствии с вашими данными 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 } 
})
...