React：nextProps和state总是一样的;因此组件不会重新渲染

Posted 2021-05-05

我陷入了一种奇怪的境地。

我有一个用于两者的组件，也提供信息和编辑该信息。由于这种情况，我必须在组件的状态中保留此信息的副本（信息通过props传递给组件，我使用的是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);

另一件奇怪的事就是说我的太空伙伴有一个头衔。当前值是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>
  );
};

答案

我想如果你删除下面的代码，那么它将解决你的问题。

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

另一答案

spacePartner是一个对象，你正在改变它。如果你改变它就不会有任何比较。使用Object.assign（）更改对象的任何值。不变性有助于比较props / nextProps和state / nextState。