Как в реакте обратиться к полю объекта, если он приходит ответом с бэкенд и изначально — пустой объект?

Question

[Анастасия]

item - это объект, на момент рендера пустой, соответственно у него нет еще поля parentNode, поэтому сразу выдается ошибка

renderValue={(value, item, selectedElement) => {
        console.log(`${item.parentNode.label} ${selectedElement}`)
      }}

Answer 1

[Владимир]

item?.parentNode?.label

Comments

[Анастасия]

да, это в определенном смысле решает проблему, теперь всё не падает, а возвращает undefined. Но как дождаться момента прихода данных с бэка, чтобы эта конструкция - item?.parentNode?.label - мне выдала значение?

[Владимир]

Анастасия, покажите, как данные запрашиваете.

[Анастасия]

данные запрашиваю путем диспатча экшена в редакс

const FieldTreeUI = ({
  config,
  isStratumShown,
  onFieldSelection,
  defaultStratumId,
  stratumId,
  expandItemValues,
  placeholder,
  isShowTitle = true,
  isStretched,
  ...otherProps
}) => {
  const dispatch = useDispatch();
  const tree = useSelector(config.treeSelector);
  const date = useSelector(getDate);
  const ignoredValues = useSelector(getIgnoredValuesOnTree);
  const { cleanStratumHandler } = useContextClear();

  useEffect(() => {
    defaultStratumId && dispatch(requestWellsStratum(defaultStratumId));
    defaultStratumId && dispatch(requestContoursByStratum({ stratumId: defaultStratumId }));
  }, [defaultStratumId]);


  useEffect(() => {
    if (!tree) {
      dispatch(initTree(config));
      dispatch(requestSetRoot(config, config.type, 'root', config.children[0].type));
    }
  }, [tree]);

  const handleSelect = useCallback(
    node => {
      if (node.type === 'stratums') {
        dispatch(clearWellsAndCounters());
        dispatch(setSelectedStratum(node.id));
        onFieldSelection && onFieldSelection(node);
      } else {
        dispatch(incorrectChoose());
      }
    },
    [dispatch, onFieldSelection],
  );


    <TreePicker
      value={stratumId}
      expandItemValues={expandItemValues}
      data={tree}
      defaultExpandAll={false}
      onExpand={handleExpand}
      onSelect={handleSelect}
      renderTreeNode={renderWithIcon}
      locale={{
        placeholder: placeholder || 'Выберите объект',
        searchPlaceholder: 'Поиск',
        noResultsText: 'Результаты не найдены',
      }}
      disabledItemValues={ignoredValues}
      menuClassName="data-menu-colored"
      onClean={cleanStratumHandler}
      renderValue={(value, item, selectedElement) => {
        console.log(`${item?.parentNode?.label}  ${selectedElement}`);
      }}
    />
)}

[Владимир]

Смотрите, у вас такой путь: экшн -> какая-то бизнес-логика с бэком -> данные попадают в редьюсер -> селект из компонента -> перерендер.

Судя по всему, перерендер не происходит, раз компонент не отрисовывается с данными с бэка.

Попробуйте сделать console.log в FieldTreeUI. Если новые данные с бэка не выведутся в консоль, то что-то в Редаксе не работает. Если новые данные норм выводятся, значит что-то в TreePicker не работает.

[Анастасия]

Получается, что нужное значение приходит - синяя строчка в консоли, но как только приходит сам объект с бэка в item и item больше не пустой, у меня пропадает нужное значение и становится undefined при следующих рендерах - красная строка. Хотя при следующих рендерах объект item не пустой - там есть нужное мне поле

[Владимир]

А parentNode у вас вообще есть в item?

[Анастасия]

Да, он появляется

[Владимир]

console.log ведь в FieldTreeUI? А в renderValue точно норм item приходит?

В общем, побольше логов везде, и смотрите, где какое значение.

[Анастасия]

Да, вы правы, почему-то происходит 5 рендеров, в 3 рендере приходит объект с нужным полем, а при остальных остается объект в item, но нужное поле parentNode пропадает из объекта почему-то