Реагируйте: nextProps и состояние всегда одинаковы;следовательно, компонент не будет повторно отображаться

Question

Я застрял в странной ситуации.

У меня есть компонент, который используется как для представления информации, так и для ее редактирования.Из-за этой ситуации я должен сохранять копию этой информации в состоянии моего компонента (информация передается компоненту через реквизиты, я использую Redux).

Однако, если япытаясь что-то обновить, мой компонент не выполняет повторную визуализацию .Причина в том, что мои nextProps и текущее состояние всегда одинаковы .

Я не изменяю свое состояние напрямую, вот мой компонент и контейнер.Я добавил componentShouldUpdate, чтобы проверить, правильно ли он обрабатывает обновления.Я зарегистрировал nextProps и состояние, и эти два всегда одинаковы.

Компонент

export class SingleSpacePartner extends Component  {
  state = {
    spacePartner: {}
  }

  componentDidMount(){
    this.getSpacePartner();
  }

  shouldComponentUpdate(nextProps, state) {
    console.log(nextProps, state);
    return true;
  }

  toggleAccount = (value)=> {
    const spacePartner = {...this.state.spacePartner, active: value};
    this.setState({spacePartner});
  }

  handleChange = (e)=> {
    const { name, value } = e.target;
    const spacePartner = {...this.state.spacePartner, [name]: value};
    console.log(spacePartner);
    this.setState({spacePartner});
  }

  getSpacePartner = ()=>{
    let id = this.props.match.params.id;
    const handleSuccess = ({data})=>{
      return this.props.getSingleSpacePartnerSuccess(data);
    };
    return this.props.getSingleSpacePartner(id).payload.then(handleSuccess).catch(err => err);
  }

  updateSpacePartner = (e)=> {
    e.preventDefault();
    const {spacePartner} = this.state;

    spacePartner.centers = spacePartner.centers.map(el => el._id);

    this.props.updateSpacePartner(spacePartner._id, spacePartner).payload.then(this.getSpacePartner).catch(err => err);
  }

  render() {
    let { spacePartner } = this.state;
    let { loading } = this.props;
    return (
      <div className='single_space_partner_page'>
        <SidebarContainer activeRoute='spacePartner'/>
        {Object.keys(spacePartner).length ?
            <div className='single_space_partner_wrapper'>
              <EditSpacePartner value={spacePartner} toggleAccount={this.toggleAccount} updateSpacePartner={this.updateSpacePartner} handleChange={this.handleChange}/>

              // rest of the template

            </div>
            : null}
      </div>
    )
  }
}

Контейнер

const mapDispatchToProps = dispatch => ({
  // actions
});

const mapStateToProps = ({ spacePartner: spacePartnerState }) => {
  let {spacePartner, loading, error} = spacePartnerState;

  return {
    spacePartner,
    loading,
    error
  };
};


export const SingleSpacePartnerContainer = connect(mapStateToProps, mapDispatchToProps)(SingleSpacePartner);

Еще одна странная вещь - сказать, что у моего Spacepartner есть титул.Текущее значение равно My Title, и если я удаляю из него e, то распространяемое изменение равно {title: 'My Titl'}, и, конечно, представление не перерисовывается.Однако, если я также удалю l, то распространяемое изменение все равно будет {title: 'My Titl'}.

В чем может быть причина всего этого?

Спасибо.

Редактировать: вот мой компонент EditSpacePartner

import React from 'react';
import {Toggle} from '../common/Toggle/Toggle';

export const EditSpacePartner = ({value, toggleAccount, updateSpacePartner, handleChange}) => {
  return (
    <div className='edit_space_partner'>
      <h2>Space Partner</h2>
      <form onSubmit={updateSpacePartner}>
        <div className='form_wrapper'>
          <div className='edit_name_wrapper'>
            <label htmlFor=''>Name</label>
            <input type='text' name='name' value={value.name} onChange={handleChange}/>
          </div>
          <div className='edit_product_key_wrapper'>
            <label>Status</label>
            <Toggle value={value.active} toggle={toggleAccount}/>
          </div>
          <div className='edit_name_wrapper'>
            <label htmlFor=''>Sample</label>
            <input type='text' readOnly name='name' value={value.sample || false}/>
          </div>
          <input type='submit' className='submit'/>
        </div>
      </form>
    </div>
  );
};

Answer 1

spacePartner - это объект, и вы изменяете его.Если вы измените его, сравнения не будет.Используйте Object.assign () для изменения любого значения объекта.Неизменность - это то, что помогает сравнивать props / nextProps и state / nextState.

Answer 2

Я думаю, что если вы удалите приведенный ниже код, это решит вашу проблему.

shouldComponentUpdate(nextProps, state) {
    console.log(nextProps, state);
    return true;
  }