Question

我使用lodash能够将属性（对象，数组）的值更改为一定深度，但是我的行为很奇怪。

情况是这样的，我使用带有钩子的react js，在这种状态下，我有一个保存用户信息的对象，因此我进行了提取操作，以将用户信息加载到状态为{{1的对象上}}。

但是，此信息不仅保存在user对象中，而且还保存在另一个名为user的对象中，所以我得到的信息处于两次状态，但具有不同的名义属性。 / p>

我需要两次获取此信息，只是为了确保当用户想要更改其数据（配置文件页面）时，我检查他修改的数据是否确实被修改了，也就是说，至少有一个与原始元素不同的元素。

问题在于，当我依次编辑userInfo上的数据时，它会更改user上的相同数据，但我不明白原因。

这个问题仅在我正在工作的本地项目上发生，这是我最奇怪的事情，在我的代码和盒子上制作了一个简单的示例，该问题没有发生。

问题似乎是由于userInfo函数引起的，但我不明白为什么只有本地发生。

你能帮我吗？

链接：codesandbox

代码：

handleChangeField

Answer 1

问题在于，当我依次编辑user上的数据时，它会更改userInfo上的相同数据，但是我不明白原因。

这告诉您user和userInfo（或user.card和userInfo.card）在发生这种情况时引用同一对象 ：

const userDataFromAjaxOrWhatever = {
    name: "James",
    surname: "bond",
    card: {
      id: 7,
      group: "J"
    },
    scope: [{ scope: "user", actions: ["create", "delete"] }]
};
const state = {
    user: userDataFromAjaxOrWhatever,
    userInfo: userDataFromAjaxOrWhatever
};

console.log(`state.user.name =     ${state.user.name}`);
console.log(`state.userInfo.name = ${state.userInfo.name}`);
console.log("Setting state.user.name = Joe");
state.user.name = "Joe";
console.log(`state.user.name =     ${state.user.name}`);     // Joe
console.log(`state.userInfo.name = ${state.userInfo.name}`); // Joe

您引用的代码不会发生这种情况，因为user和userInfo指向不同的对象。我假设在您的真实代码中，您以不同的方式填充状态，而不是使用硬编码的对象常量。

无法说出为什么user和userInfo指向同一个对象的原因，因为您没有向我们展示正在发生的代码，但是您必须做类似的事情转到上面的代码段：

const state = {
    user: userDataFromAjaxOrWhatever,
    userInfo: userDataFromAjaxOrWhatever
};

相反：

const state = {
    user: userDataFromAjaxOrWhatever,
    userInfo: lodash.cloneDeep(userDataFromAjaxOrWhatever)
};

那么您就没有这个问题了：

const userDataFromAjaxOrWhatever = {
    name: "James",
    surname: "bond",
    card: {
      id: 7,
      group: "J"
    },
    scope: [{ scope: "user", actions: ["create", "delete"] }]
};
const state = {
    user: userDataFromAjaxOrWhatever,
    userInfo: _.cloneDeep(userDataFromAjaxOrWhatever)
};

console.log(`state.user.name =     ${state.user.name}`);
console.log(`state.userInfo.name = ${state.userInfo.name}`);
console.log("Setting state.user.name = Joe");
state.user.name = "Joe";
console.log(`state.user.name =     ${state.user.name}`);     // Joe
console.log(`state.userInfo.name = ${state.userInfo.name}`); // James

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

React js的钩子lodash设置了奇怪的行为

1 个答案: