Блог

у меня есть комп для детей и детский компонент. следующим образом

родитель

 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;
 

ребенок

 
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 ApiPanel
 

Теперь, когда я вызываю addApi (), он обновляет родителя, но не пересылает ребенка.
Но когда я вызываю функцию removeApi() , она должным образом обновляет родительский, а также перенаправляет дочерний компонент.

в первом случае, когда я вручную перезагружаю компонент, я вижу изменения.

Не понимаю, почему это происходит

Попробуйте изменить свою addApi функцию.

 addApi = () => {
    let { apiArray } = this.props
    this.props.updateStateFromChild('api', 'updateObject', [...apiArray, {id : uniqid()} ])
  };
 

Вам нужно вернуть обогащенную копию вашего массива

Всякий раз, когда мы обновляем данные, используя массивы, объекты. Нам всегда нужно создавать новый массив […массив], новый объект {…obj}. Потому что, если мы обновим значение в массиве или obj без создания, оно не изменит ссылочное значение, следовательно, предполагается, что состояние не обновляется и не будет повторно отображаться.