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

Question

Я впервые использую Ant Design в проекте. Используя компоненты

и .

Answer 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>
   );
});