React-Select,异步选项,没有显示值
React-Select, Async Option, no value displayed
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"]
但是建议值为空
这里是异步组件的状态和属性
这里是带有示例的官方文档:https://github.com/JedWatson/react-select#async-options-with-promises
我缺少什么?
在您的 console.log(json) 中,您打印出一个包含字符串的数组,它不是一个对象数组。
如文档所述,您需要像下面这样格式化您的数据。在您退货之前。
例子
const json = [
{ value: 'EASPORTFIFA16', label: 'EA SPORTS FIFA 16' },
{ value: 'FIFA16UltimateTeam', label: 'FIFA 16 Ultimate Team' }
]
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"]
但是建议值为空
这里是异步组件的状态和属性
这里是带有示例的官方文档:https://github.com/JedWatson/react-select#async-options-with-promises
我缺少什么?
在您的 console.log(json) 中,您打印出一个包含字符串的数组,它不是一个对象数组。
如文档所述,您需要像下面这样格式化您的数据。在您退货之前。
例子
const json = [
{ value: 'EASPORTFIFA16', label: 'EA SPORTS FIFA 16' },
{ value: 'FIFA16UltimateTeam', label: 'FIFA 16 Ultimate Team' }
]