react select默认值的初始化

Question

1.如图，在componentDidMount 调用http异步，设置this.state.projects = res.response.projects。

2.在render的时候想通过projects来设置select的默认选中值。却一直是undefined，原因是初始化的projects:[]所以render一次之后 就一直是[]。没有更新到，怎么把projects里面值赋值到select里面去呢？

Answer 1

select的defaultValue在初始化之后不会再重载哦，如果需要实现题目中的效果，需要给select加上value配合onChange函数来做。

示例：

    state = {
        projects: [],
        value: ''
    }
    componentDidMount() {
        // 模拟ajax调用，成功之后把需要改变的默认值赋值给this.state.value
        setTimeout(() => {
            this.setState({
                projects: [{ id: 1, name: '花生' }, { id: 2, name: '苹果' }, { id: 3, name: '杨桃' }],
                value: 1
            })
        }, 1000)
    }
    handleChange = e => {
        this.setState({
            value: e.target.value
        })
    }
    render() {
        let projects = this.state.projects
        return (
            <div>
                {/* 这里不用再去判断project的长度是否大于0，在ajax里面做判断就行，如果小于零或者不存在它就是默认值 */}
                <select defaultValue='' value={this.state.value} onChange={this.handleChange}>
                    {projects.length > 0 && projects.map((item, i) => {
                        return <option key={i} value={item.id}>{item.name}</option>
                    })}
                </select>
            </div>
        );
    }

Answer 2

defaultValue里应该拿的是this.state.projects吧~

Answer 3

要么传value，要么在componentWillMount初始化值