То же значение возвращает другое значение с помощью lodash - PullRequest
Новая
       9

То же значение возвращает другое значение с помощью lodash

0 голосов
/ 12 октября 2018

Случай 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:

Когда я указываю значение selectedZone из моего AsyncStorage (значение то же самое), оно не работает и показывает предупреждение желтого цвета.

Поэтому я пытаюсь проверитьисходный код.

Функция 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.

enter image description here

повторно -1 в случае 2, я думаю, что он должен вернуть 1, как в случае 1

enter image description here

Iсравните с options и selectedOption не вижу, что отличается в случае 1 и случае 2.

Кто-то может научить меня, на каком этапе я пропущу это?

Любая помощь будетоценили.Заранее спасибо.

1 Ответ

0 голосов
/ 12 октября 2018

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>

Однако вы можете использовать метод Лодаша 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>
...