Question

情况1：

我将指定选项值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>

相同的值用lodash返回不同的值

1 个答案: