Question

我陷入了奇怪的境地。

我有一个组件，用于显示信息和编辑信息。由于这种情况，我必须在组件的状态下维护此信息的副本（信息通过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);

另一件事很奇怪，就是说我的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

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

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

Answer 2

spacePartner是一个对象，您正在对其进行突变。如果您进行突变，将不会有任何比较。使用Object.assign（）更改对象的任何值。不变性是帮助比较props / nextProps和state / nextState的原因。

反应：nextProps和状态始终相同；因此组件不会重新渲染

2 个答案: