Antd < Option > изменяет поведение рендера чистым существованием неисполненного (!) кода

Это:

<img onerror="this.src='/images/image.png'" src="...">
-2
задан Ruudy 15 January 2019 в 22:27
поделиться

1 ответ

В первом случае у вас есть:

if (a) {
    console.log("GETS CALLED");
    return false;
}

return true;

Когда этот код выполняется, ваш вариант не отформатирован для удобного отображения.

Во втором у вас есть только:

return true;

В этом случае он правильно форматируется.

Обратите внимание, что это не просто удаление оператора console.log, и вы не просто включаете какое-то тривиальное утверждение if. Вы меняете возвращаемое значение функции. Так как это в вызове .filter, вы изменяете, какие значения передаются в .map, который фактически форматирует опцию для целей отображения.

Если бы вы попытались:

if (a) {
    console.log("GETS CALLED");
}

return true;

Вы бы увидели, что значение отформатировано, и ваш оператор console.log попадет.

Обновление Я думаю, что вы пытаетесь добиться, чтобы второй раскрывающийся список исключал опцию, выбранную в первом раскрывающемся списке. В этом случае вам нужно будет отображать разные массивы опций для каждого элемента. Также обязательно включите элемент, выбранный для текущего раскрывающегося списка, чтобы на выбранном элементе отображалось правильно. Что-то в этом роде должно помочь:

const orderForm = this.state.order.map((o, i) => {
   const options = this.state.parts
       .filter(p => {
           // look for any *other* order that has this part id selected
           const a = this.state.order.find((o2) => o2 !== o && o2.partId === p.id);
           return !a;
       })
       .map((p) => (<Option ... />));

   return (
      <Select>
         {options}
      </Select>
   );
});

Или, если вы хотите визуализировать <Option> только один раз, вы можете сделать что-то вроде этого:

const allOptions = this.state.parts.map((p) => [p.id, (<Option ... />)]);

const orderForm = this.state.order.map((o, i) => {
   const options = allOptions 
       .filter(([partId]) => {
           // look for any *other* order that has this part id selected
           const a = this.state.order.find((o2) => o2 !== o && o2.partId === partId);
           return !a;
       })
       .map(([_, opt]) => opt);

   return (
      <Select>
         {options}
      </Select>
   );
});
0
ответ дан p.s.w.g 15 January 2019 в 22:27
поделиться
Другие вопросы по тегам:

Похожие вопросы: