Предупреждение React proptypes перед визуализацией компонента?

У меня есть компонент, который оборачивает другие компоненты и условно отображает их, когда все необходимые данные загружены. Тем не менее, я получаю ошибки протипа -- по строкам the prop x is marked as required in component Y but its value is undefined. prop x — это данные, которые еще не вернулись с сервера, а component Y — это дочерний компонент, который будет отображаться, когда данные вернутся.

Вот пример того, о чем я говорю:

<Wrapper contentLoaded={hasDataLoaded && !!dataThatWillLoad}>
  <ComponentWithData
    dataThatWillLoad={dataThatWillLoad}
    dataThatAlreadyExists={dataThatAlreadyExists}
   />
</Wrapper>

и мой компонент-оболочка:

const Wrapper = ({ contentLoaded, children }) => {
  if (contentLoaded) return children;
  return <p>Loading</p>;
}

Это приведет к ошибке Prop dataThatWillLoad is marked as required in component ComponentWithData but its value is undefined.

Мне это кажется странным, поскольку ComponentWithData даже не отображается, пока не вернутся данные. Это как-то связано с проверкой proptypes? Этот конкретный фрагмент данных поступает в компонент через mapStateToProps, может ли это быть как-то связано с этим?

Спасибо!


reactjs react-redux react-proptypes
person JSilv    schedule 23.01.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Как вы это написали, всегда будут создаваться дети, ведущие к вашей проблеме. Безоговорочно добавляя их в качестве дочерних элементов в компонент-оболочку, React создаст их перед добавлением в дочернюю опору. Другой способ сделать это - добавить поддержку в вашу оболочку с самим компонентом. Вы можете увидеть пример этого в компоненте Route, предоставленном React Router: https://reacttraining.com/react-router/web/api/Route

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

Редактировать: TLDR: так, как вы его настроили, компонент ComponentWithData создается и получает реквизиты, прежде чем он будет передан в качестве дочернего элемента вашей оболочке.

person iHowell    schedule 23.01.2018
comment
О, это реально круто. Я не знал, что компоненты существуют в каком-либо виде, который может повлиять на протипы вне времени, когда начинается жизненный цикл компонента. Чем больше ты знаешь. Спасибо! - person JSilv; 24.01.2018