javascript - React-Select，异步选项，不显示值

Question

import React from 'react';
import Select from 'react-select';
require("../node_modules/react-select/dist/react-select.css");   

const getOptions = (input) => {
      return fetch(`/games/uni/autocomplete/${input}`)
        .then((response) => {
          return response.json();
        }).then((json) => {

      console.log(json)
      return { options: json };
    });
}


var SearchBar = React.createClass({
    render: function() {
       return (

            <Select.Async
              name="form-field-name"
              loadOptions={getOptions} />   
    )
  }
});

export default SearchBar;

console.log(json) 就像：["EA SPORTS FIFA 16", "FIFA 16 Ultimate Team"]

但建议值为空

这里是组件 Async 的 state 和 props

这里是带有示例的官方文档：https ://github.com/JedWatson/react-select#async-options-with-promises

我缺少什么？

Answer 1

在您的 console.log(json) 中，您打印出一个包含字符串的数组，而不是一个对象数组。

就像文档说的那样，你需要像下面这样格式化你的数据。在您退货之前。

例子

const json = [
 { value: 'EASPORTFIFA16', label: 'EA SPORTS FIFA 16' },
 { value: 'FIFA16UltimateTeam', label: 'FIFA 16 Ultimate Team' }
]