Tengo un componente con un menú desplegable que tiene dos opciones. 'Miembros existentes' y 'Agregar nuevo miembro'.
Si el valor de props.existingMembers.length > 0, no se debe seleccionar ningún valor predeterminado en el menú desplegable. Sin embargo, si props.existingMembers.length === 0. 'Agregar nuevo miembro' debe seleccionarse como el valor predeterminado en el menú desplegable.
En ComponentDidMount estoy haciendo una llamada a la API con la ayuda de la cual se obtiene props.existingMembers. Dado que props.existingMembers siempre tiene una longitud de 0 en el primer procesamiento (antes de la llamada a la API). No puedo lograr el requisito anterior.
class AssignOwnershipDialog extends React.Component { constructor(props) { super(props); this.state = { dropDownValue: '', }; } componentDidMount() { fetchExistingMembersList(); } static getDerivedStateFromProps(props, state) { if (props.existingMembers.length === 0) { return { dropDownValue: 'Add New' }; } if (props.existingMembers.length === 0) { return { dropDownValue: '' }; } } handleDropDownSelection = (dropDownValue) => { this.setState({ dropDownValue }); } render() { const {dropDownValue}=this.state; return ( <React.Fragment> <Select value = {dropDownValue} onChange = {(e) => this.handleDropDownSelection(e.target.value)}> <MenuItem value = "Add New" key = {0}> Add New </MenuItem> <MenuItem value = "Existing Member" key = {1}> Existing Member </MenuItem> </Select> </React.Fragment> ); } }El enfoque anterior parece no funcionar ya que el valor del menú desplegable no cambia
Puede agregar un elemento con un valor vacío, por lo que si el estado está vacío, no se mostrará nada en el menú desplegable
hay un pequeño error
static getDerivedStateFromProps(props, state) { if (props.existingMembers.length === 0) { return { dropDownValue: 'Add New' }; } // mistake if (props.existingMembers.length > 0) { return { dropDownValue: '' }; } }