Tengo una compensación previa y un componente infantil. como sigue
padre
export class ExpressionMenu extends Component { constructor(props) { super(props) } state = { apiArray: [], } updateStateFromChild = (arrayType, propertyType, value) => { let { apiArray } = this.state let currentArray = [] let idx = apiArray.findIndex((q) => q.id === id) currentArray = apiArray switch(propertyType) { case 'updateObject': { currentArray = value break; } } this.setState({ apiArray: currentArray }) } render () { const { apiArray } = this.state return ( <React.Fragment> <div > <div> <ApiPanel apiArray={apiArray} updateStateFromChild={this.updateStateFromChild} /> </div> </div> </React.Fragment> ) } } ExpressionMenu.propTypes = { styleOverride: PropTypes.object, eventHandler: PropTypes.func, }; export default ExpressionMenu;niño
export class ApiPanel extends Component { constructor(props) { super(props), } removeApi = (id) => { let { apiArray } = this.props apiArray = apiArray.filter((q) => q.id !== id); this.props.updateStateFromChild('api', 'updateObject', apiArray) }; addApi = () => { let { apiArray } = this.props const id = uniqid(); let obj = {} obj.id = id apiArray.push(obj) this.props.updateStateFromChild('api', 'updateObject', apiArray) }; render() { const { apiArray } = this.props return ( <React.Fragment> { apiArray.map((apiObj, i) => <div key={i} > <span onClick={() => this.removeApi(apiObj.id) } className={[classes.deleteRow,'material-icons'].join(' ')}> close </span> <div> <label><b>Hi</b></label> </div> <div onClick={this.addApi}>+Add Api</div> } </React.Fragment> ) } } ApiPanel.propTypes = { apiArray: PropTypes.array, updateStateFromChild: PropTypes.func } export default ApiPanelAhora, cuando llamo a addApi(), actualiza el padre pero no vuelve a representar al hijo. Pero cuando llamo a removeApi() , actualiza el elemento principal y vuelve a representar correctamente el componente secundario.
en el primer caso, cuando recargo manualmente el componente, puedo ver el cambio.
No entiendo por qué está pasando esto
Intente cambiar su función addApi .
addApi = () => { let { apiArray } = this.props this.props.updateStateFromChild('api', 'updateObject', [...apiArray, {id : uniqid()} ]) };Debe devolver una copia enriquecida de su matriz
Cada vez que actualizamos el estado usando matrices, objetos. Necesitamos crear siempre una nueva matriz [... matriz], un nuevo objeto {... obj}. Porque si actualizamos el valor en la matriz u obj sin crearlo, no cambiará el valor de referencia, por lo tanto, asume que el estado no se actualiza y no se volverá a procesar.