比较第一个状态和最后一个状态reactjs答案

【问题标题】：compare the first state to the last state reactjs比较第一个状态和最后一个状态reactjs
【发布时间】：2018-05-11 23:25:07
【问题描述】：

我正在尝试制作一个编辑页面。我正在为所做的任何更改更新状态。我想将初始状态与上次保存时的最后状态进行比较。但我无法控制第一个状态。

export default class extends Component {

    constructor(props){
        super(props);
        this.changeDetails = this.changeDetails.bind(this);
        this.state = {
            driver: this.props.driver
        }
    }

    changeDetails = value => {
        this.setState({
            driver:value
        })
    }

    onRegister = () => {
        //I want to make a comparison here.

    }


    render() { 
        const {driver} = this.state
        return (
            <div>
               <EditView driver={driver} changeDetails={this.changeDetails}/>
            </div>
        );
    }
}

EditView.js

 export default class extends Component {
      render() {
        const { driver} = this.props;

        const changeDetails = event => {
            driver['fname] = event.target.value;
            this.props.changeDetails(driver);
          };

        return (
          <div>
            <Input
                value={driver.fname}
                onChange={event => changeDetails(event)}
                />
          </div>
        );
      }
    }

【问题讨论】：

如果你想比较为什么不持有两个独立的状态值呢？或者如果您的“驱动程序”数据不会在此处更改甚至更好，您为什么不只保留一个状态并将其与您的“驱动程序”属性进行比较？
(oldDriver = this.props.driver and newDriver = this.props.driver ) 我这样做了，但是当我更新 newDriver 时，oldDriver 也会改变
为什么将 newDriver 设置为 props 值？您正在其他地方获得驱动程序道具，对吗？因此，只需通过 onChange 保存新信息的状态，然后将其与您的道具（原始驱动程序数据）进行比较。
我应该在父组件中进行比较吗？我通过了驱动数据
让我更好地理解你的逻辑。这里（第一个组件）得到一个名为 driver 的 prop。您正在渲染 EditView 组件并通过 onChange 处理程序从那里获取一个值。不能在 state 中设置这个值，和第一个 Component 中的原始驱动 prop 进行比较吗？

标签： reactjs state react-props

【解决方案1】：

不要直接改变驱动程序本身。使用这样的东西：

const changeDetails = event =>
    this.props.changeDetails( { ...driver, fname: event.target.value } );

【讨论】：