lodash 相同的值返回不同的值

Question

案例一：

我将指定选项值selectedZone 设置为我的<DropDownMenu /> 它工作正常。

<DropDownMenu /> 是我的选择器：

  render() {
    let { zone, selectedZone, selectedCity } = this.state;

    return (
        <DropDownMenu
            style={{
              selectedOption: {
                marginBottom: -5
              }
            }}
            styleName="horizontal"
            options={zone}
            selectedOption={selectedZone || zone[0]}
            onOptionSelected={(zone) => {
                this.setState({ selectedZone: zone, selectedCity: zone.children[0] });
            }}
            titleProperty="brand"
            valueProperty="id"
        />

        ...
     )
   }

案例 2：

当我从我的 AsyncStorage 中指定值 selectedZone（值相同）时，它不起作用并显示黄色警告。

所以我尝试检查源代码。

函数getSelectedOption()来自<DropDownMenu />源代码。

  getSelectedOption() {
    const { options, selectedOption } = this.props;
    console.log('check options');
    console.log(options);
    console.log('check selectedOption');
    console.log(selectedOption);
    console.log('check _.indexOf(options, selectedOption');
    console.log(_.indexOf(options, selectedOption));
    if (_.indexOf(options, selectedOption) === -1) {
      console.warn(
        `Invalid \`selectedOption\` ${JSON.stringify(selectedOption)}, ` +
        'DropDownMenu `selectedOption` must be a member of `options`.' +
        'Check that you are using the same reference in both `options` and `selectedOption`.'
      );
      return;
    }
    return selectedOption;
  }

lodash 函数 indexOf 将在案例 1 中返回 1。

在案例 2 中重新运行 -1，我认为它应该像案例 1 一样返回 1

我与options 和selectedOption 进行比较，看不出案例 1 和案例 2 有什么不同。

有人可以教我我错过了哪一步？

任何帮助将不胜感激。提前致谢。

Answer 1

When I specify the value selectedZone from my AsyncStorage (The value is the same) it doesn't work and show yellow warnning.

Lodash 与此无关 - 它归结为 JavaScript 如何比较对象 - 只有当它们实际上是相同的底层对象时，它们中的两个才相同：

const a = {name: "fred"};
const b = a; //literally the same object
const c = {name: "fred"}; //an object that looks the same

console.log("a, b, c", a, b, c);
console.log("a === b", a === b); 
console.log("a === c", a === c);

具有相同值且是不同对象的两个对象不被视为相同。至少，不是根据indexOf，因为它使用了 JavaScript 比较：

const arr = [
  {name: "alice"},
  {name: "bob"},
  {name: "carol"}
];

const originalObject = arr[1]; //literally the same object
const newObject = {name: "bob"}; //an object that looks the same

const indexWithOriginalObject = _.indexOf(arr, originalObject);
const indexWithNewObject = _.indexOf(arr, newObject);

console.log("index when using the original object:", indexWithOriginalObject);
console.log("index when using a new object that looks the same:", indexWithNewObject);

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>

但是，您可以使用 Lodash 方法 findIndex 来正确进行比较。

const arr = [
  {name: "alice"},
  {name: "bob"},
  {name: "carol"}
];

const index = _.findIndex(arr, {name: "bob"});

console.log("index", index);

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>

警告 - 仅使用对象调用 findIndex 只会检查您提供的属性。因此，如果您有多个看起来相同的对象，它可能找不到您想要的确切对象。如果您想检查两个对象是否完全相同，可以在回调中使用isEqual

const arr = [
  {name: "alice"},
  {name: "bob", lastName: "bloggs"},
  {name: "bob", lastName: "smith"},
  {name: "carol"}
];

const indexPartial1 = _.findIndex(arr, {name: "bob"});
const indexPartial2 = _.findIndex(arr, {name: "bob", lastName: "smith"});

const indexEqual1 = _.findIndex(arr, x => _.isEqual(x, {name: "bob"}));
const indexEqual2 = _.findIndex(arr,x => _.isEqual(x, {name: "bob", lastName: "smith"}));

console.log(
  "index by partial equality where the argument only has one property:", 
  indexPartial1
);
console.log(
  "index by partial equality where the argument has both properties:", 
  indexPartial2
);

console.log(
  "index by full equality where the argument only has one property:", 
  indexEqual1
);
console.log(
  "index by full equality where the argument has both properties:", 
  indexEqual2
);

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>