反应 | JavaScript:需要比较两个对象

Kar*_*mar 3 javascript reactjs react-native react-redux

客观的:

我需要检查表单是否已被用户编辑。如果是,那么我将调用axios.put()函数。

问题:

由于在 JS 中, obj1 = { name: "John "} !== obj2 = { name: "John" } 我正在寻找一种更好的方法来比较两个对象。

我的方式(似乎效率低下):

const intialAddress= {
   city: "CA"
   line1: "testline1"
   line2: "testline2"
   phone: "7772815615"
   pin: "1234"
   state: "CA"
}

const [address, setAddress] = useState(initialAddress);
let addressFinalValue = {};
const addressValue = (e) => {
        addressFinalValue[e.target.name] = e.target.value;
    };

/***************************
 * The way I am doing it 
 **************************/

const submitHandler = (e) => {
  e.preventDefault();
  setAddress(addressFinalValue);
  if ( address.line1 !== initialAddress.line1 || address.line2 !== initialAddress.line2 || etc ... ) {
     // axios.put()
  } 
};

return (
    <form onSubmit={submitHandler}>
            <div className="form-group">
                <input id="address-line-1" className="form-control" value={address.line1}
                    onChange={addressValue} name="line1" type="text" placeholder="Line 1" />
            </div>

                   //  multiple input fields here   //

        <button className="btn btn-success">Save Address & Continue</button>
    </form>
)
Run Code Online (Sandbox Code Playgroud)

我非常感谢您的帮助。提前致谢。

Jag*_*gan 7

我建议使用 Lodash。检查这个https://lodash.com/docs/3.10.1#isEqual

安装洛达什

npm install lodash
Run Code Online (Sandbox Code Playgroud)

在您的文件中导入 lodash

import _ from 'lodash';
Run Code Online (Sandbox Code Playgroud)

比较您的对象

if(!_.isEqual(obj1, obj2)) {
  //perform your action
}
Run Code Online (Sandbox Code Playgroud)


Hri*_*rma 5

不使用lodash比较两个对象:

function compareObjs(obj1,obj2){
   return JSON.stringify(obj1)===JSON.stringify(obj2);
}
console.log(compareObjs({name:"stack"},{name:"overflow"}));
Run Code Online (Sandbox Code Playgroud)