这可能与我不理解(非常奇怪)JavaScript 的工作原理有关,但我真的不明白为什么会这样。我有这段 React/React-select 代码,几乎是从 React-select 自述文件中逐字取出的:
class Status extends Component {
constructor(props) {
super(props)
this.state = {
selectedOption: null,
}
this.statusOptions = [];
}
handleChange = (selectedOption) => {
this.setState({ selectedOption });
console.log(`Option selected:`, selectedOption);
}
componentDidMount = () => {
console.log(this.statusOptions);
axios.get(host+'/StatusList')
.then((response) => {
for(var i = 0; i < response.data.status_list.length; i++) {
this.statusOptions.push({value: response.data.status_list[i][0], label: response.data.status_list[i][1]});
}
})
.catch((error) =>{
console.log(error)
})
.then(() =>{
});
}
render() {
const { selectedOption } = this.state;
return (
<Select
value={selectedOption}
onChange={this.handleChange}
options={this.statusOptions}
/>
);
}}
这不会填充我的 react 选择列表:但是,将列表/数组初始化移动到 componentDidMount
使其可以工作。为什么??
class Status extends Component {
constructor(props) {
super(props)
this.state = {
selectedOption: null,
}
}
handleChange = (selectedOption) => {
this.setState({ selectedOption });
console.log(`Option selected:`, selectedOption);
}
componentDidMount = () => {
this.statusOptions = [];
console.log(this.statusOptions);
axios.get(host+'/StatusList')
.then((response) => {
for(var i = 0; i < response.data.status_list.length; i++) {
this.statusOptions.push({value: response.data.status_list[i][0], label: response.data.status_list[i][1]});
}
})
.catch((error) =>{
console.log(error)
})
.then(() =>{
});
}
render() {
const { selectedOption } = this.state;
return (
<Select
value={selectedOption}
onChange={this.handleChange}
options={this.statusOptions}
/>
);
}}
最佳答案
正确的方法是在 React 组件的状态中初始化一个 statusOptions
属性,然后将其填充到 Axios 调用快乐路径中,以便 setState
方法触发重新渲染填充选择组件。
class Status extends Component {
constructor(props) {
super(props)
this.state = {
selectedOption: null,
statusOptions: []
}
}
handleChange = (selectedOption) => {
this.setState({ selectedOption });
console.log(`Option selected:`, selectedOption);
}
componentDidMount = () => {
axios.get(host+'/StatusList')
.then((response) => {
const statusOptions = []
for(var i = 0; i < response.data.status_list.length; i++) {
statusOptions.push({value: response.data.status_list[i][0], label: response.data.status_list[i][1]});
}
this.setState({ statusOptions })
})
.catch((error) =>{
console.log(error)
})
}
render() {
const { selectedOption, statusOptions } = this.state;
return (
<Select
value={selectedOption}
onChange={this.handleChange}
options={statusOptions}
/>
);
}
}
关于javascript - React-select 和 axios 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55996072/