After secondary encapsulation of Select with ant design, how to reset the value of select after render

export class ProjectList extends Component{
    constructor(props){
        super(props)
        this.state={
            project:[],
        }
    }
    componentDidMount(){
        axios.get("http://127.0.0.1:9090/pro/pList").then(res =>{
            this.setState({
                project:res.data.page.datas
            })
        })
    }
    render(){
        return (
                    <Select key="project" style={{width:"100%"}}  placeholder="">
                        {
                            this.state.project.map((item,i) =>{
                                return(
                                    <Option key={`project${i}`} value={item.id}>{item.name}</Option>
                                )
                            })
                        }
                    </Select>
        )
    }
}
class AddOrderType extends Component{
    render(){
        
        return(
            <Modal
            title=""
            wrapClassName="vertical-center-modal"
            visible={this.props.ishow}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
            footer={[
                <Button key="back" size="large" onClick={this.handleCancel}></Button>,
                <Button key="submit" type="primary" size="large" loading={loading} onClick={this.handleOk}>
                  
                </Button>,
              ]}
            >
            <FormItem
                {...formItemLayout}
                label=""
                >
                {getFieldDecorator("project",{
                    rules: [{
                        required: true, 
                        message: "!"
                    }],
                })(<ProjectList values={this.state.values} onChange={this.onChange} />)}//
            </FormItem>
            </Modal>
        )
    }
}

now it"s a pop-up box that contains a select like this because this select is used in a lot of places, so I encapsulated the select again. Now the pop-up box is normal and the select component is normal, but when the user manipulates the select and closes the pop-up box and opens it again, the value of the select is the value of the last operation and has not been reset. If you assign a value with value, it will cause select to become inoperable. If you use defaultValue, it will only work when it is loaded for the first time.

* *

< H2 > Don"t just say some theoretical things, such as ambiguous answers such as props reset, please give a reasonable answer after practice. < / H2 >

* *

Mar.13,2021

this is not an encapsulation.
just make the Select component a controlled component.


reactchildpropsstatediffreact

componentWillReceivePropsvalue

class mySelect extends React.Component {
    constructor(...args) {
        super(...args);
        this.state = { value: [] };
    }
    ...
    componentWillReceiveProps(nextprops) {
        const { options } = nextprops, oldOpts = this.props.options;
        if ( options.length != oldOpts.length ) {
            this.setState( { value: [] } );    
        } else {
            for ( let opt of options ) {
                if ( !oldOpts.includes(opt) ) {
                    this.setState( { value: [] } );
                    break;
                }
            }
        }
    }
    ...
    render() {
        const { options } = this.props, { value } = this.state;
        const option = options.map( val => <Option key = { val }>{ val }</Option> );
        const select = (
            <Select value = { value }>{ option }</Select>
        );
        return (
            <>
                <myTag>
                    some anthor tags...
                </myTag>
                { select }
            </>
        );
    }
}

in fact, this method is not the best method, which is not in line with react programming ideas, generally this situation is because you do not have a unified management of state, so that components of state scattered in all levels, so I suggest that you had better first understand the state of react to improve, let the highest-level components to manage its subcomponents, through the form of props transfer state.

take this problem as an example, in fact, you should set up a state, of value in the top component and pass it into the Select component in the form of props, so that the Select component can know the option you are choosing through this.props.value. When your option data has changed, the component setState ({value: []}) at the top level will be emptied.

Menu