怎么在Promise中返回值？

Question

1、有如下React代码：

class Qu extends Component {
    render() {
        let { value, getDataPromise, onChange } = this.props;
        
        //这边尝试加return但是返回值是Promise
        return Promise.resolve(getDataPromise).then(list => {
            //这边的return返回的是then函数，所以render得不到DOM
            return (
                <select className="form-control" value={value} onChange={onChange}>
                    <option value={''}>全部</option>
                    {list.map((item, index) => (
                        <option key={index} value={item.code}>{item.name}</option>
                    ))}
                </select>
            );
        })
    }
}

Qu.propTypes = {};
Qu.defaultProps = {};

export default Qu;

2、这里要怎么做才能让DOM返回render函数？因为数据是依赖getDataPromise函数的？

Answer 1

试试这样写，把数据请求放在渲染之后：

class Qu extends Component {
    constructor(props) {
        super(props);
        this.state = {list: null};
    }
    
    componentDidMount() {
        this.props.getDataPromise().then(list => {
            this.setState({list});
        });
    }

    render() {
        const {value, onChange} = this.props;
        const {list} = this.state;
        
        if (!list) return null;
        
        return (
            <select className="form-control" value={value} onChange={onChange}>
                <option value={''}>全部</option>
                {list.map((item, index) => (
                    <option key={index} value={item.code}>{item.name}</option>
                ))}
            </select>
        );
    }
}

Answer 2

render是一个纯函数不能再render里面请求数据，
而且render会被频繁调用，这样不是要每次都请求数据嘛。
楼上正解。