Понимание HOC с Redux
У меня есть компонент пользователей, который просто отображает список пользователей. Я попытался обернуть его в компонент загрузки HOC, чтобы он отображался только после загрузки пользователей, в противном случае показывал счетчик загрузки (ну, пока только текст)
это мой HOC:
const Loading = (propName) => (WrappedComponent) => {
return class extends React.Component{
render(){
return this.props[propName].length === 0 ? <div> Loading... </div> : <WrappedComponent {...this.props} />
}
}
}
export default Loading;
в нижней части моего пользовательского компонента у меня есть это:
export default connect(
mapStateToProps,
mapDispatchToProps
)(Loading('users')(Users));
в настоящее время слово Loading... просто остается на экране. и propName проходит как undefined
Я думаю, что по какой-то причине компонент пользователей никогда не заполняется. что я сделал не так?
Проходит ли какой-нибудь реквизит?
@ Think-Twice Я хочу визуализировать компонент на основе реквизита
@jmargolisvt нет
@TheDecimator Если ваш компонент не получает никаких реквизитов, это, вероятно, означает, что ваш mapStateToProps определен неправильно. Попробуйте const mapStateToProps = () => ({ users: ['Ursuala User'] }); и посмотрите, рендерится ли Users для фиктивных данных. Также было бы полезно разместить свой mapStateToProps.
@ FK82, но здесь компонент Loading не получает свой аргумент через props. Компонент Users, возможно, получит некоторую поддержку users, но как компонент Loading получит это? Здесь OP напрямую передает это в качестве аргумента. Вот почему в компоненте «Загрузка» нет props.
@devserkan извините, вы можете объяснить, почему у него нет реквизита. Я думал, они передаются компоненту загрузки оболочки?
Я ПОЧИНИЛ ЭТО!!. ха-ха. соз. в восторге. это потому, что в этом компоненте я загружал пользователей в componentDidMount. поэтому я вытащил это в свой собственный компонент, а затем просто получил компонент для рендеринга пользователей и обернул его в загрузочную композицию, показывает счетчик при выполнении выборки, а затем, когда он есть, они там. ууу. Спасибо за помощь!
Я собирался прямо сейчас спросить, как вы получаете своих пользователей и как вы визуализируете этот компонент. Поскольку я не понимаю структуру вашего вопроса :) Рад, что вы решили свою проблему. Вы можете дать подробный ответ о решении и принять его.
я сделаю это. почему это не работает?
Когда я снова посмотрел на ваш код, я понял, что не совсем правильно его понял! Я даже неправильно прочитал часть вашего кода.
Я обновил свой ответ настолько, насколько понимаю ситуацию :)
ура, большое спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Обновление после комментариев
Мой ответ ниже вводит в заблуждение, поскольку в то время я не понял вашего намерения должным образом. Кроме того, мое объяснение того, что я не получаю props, почему-то неверно. Это правда, если мы не рендерим компоненты, но здесь вы это делаете. Итак, проблема была не в этом.
Проблема здесь в том, что ваш компонент Loading не отображается снова после получения данных о пользователях. Собственно, вы никогда не получаете пользователей :) Вот шаги вашего приложения (возможно).
- Вы экспортируете здесь HOC-функцию, а не Wrapped. Он исходит из вашего файла
Users, но он не экспортирует реальный компонентUsers. Это важно. - Ваш родитель выполняет рендеринг в первый раз, и он рендерит экспортированный компонент HOC.
- Ваш дочерний компонент отрисовывается и попадает в
Loading, а не вUsers. - В
Loadingваша опораusersпуста, поэтому вы видите Загружается .... - Компонент
Usersбольше никогда не обрабатывается. Таким образом, получение пользователей там не обновляет состояние.
Ваше решение извлекает выборку из Users и загружает этот компонент. Наверное, в родительском. Так:
- Родитель выбирает пользователей, затем отображает себя и всех своих дочерних элементов.
- Компонент
LoadingHOC выполняет второй рендеринг.
Я не знаю, как вы планируете использовать этот HOC, но если я правильно понял (поскольку у меня нет опыта работы с HOC), в вашем случае проблема в том, что вы не передаете prop функции Loading. Это потому, что вы не используете его здесь как обычный компонент. Это функция, а propName здесь только аргумент.
Когда мы рендерим такую функцию без состояния:
<Loading propName = "foo" />
тогда для нашей функции будет аргумент props. Если мы не отрендерим его таким образом, не будет ни аргумента props, ни props.propName. Если это не так, пожалуйста, исправьте это и объясните правильную логику. Итак, вы, вероятно, захотите сделать что-то вроде этого:
class App extends React.Component {
render() {
return (
<div><FooWithLoading /></div>
);
}
}
const Loading = (users) => (WrappedComponent) => {
return class extends React.Component {
render() {
return (
users.length === 0 ? <div> Loading... </div> :
<WrappedComponent
users = {users}
/>
);
}
}
};
const Foo = props => {
return (
<div>
Users: {props.users}
</div>
);
}
const FooWithLoading = Loading("foobar")(Foo);
ReactDOM.render(<App />, document.getElementById("root"));<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id = "root"></div>Итак, в вашем случае:
export default connect(
mapStateToProps,
mapDispatchToProps
)(Loading('users')(Users));
должно сработать?
Или вам нужно правильно отрендерить ваш компонент в подходящем месте вашего приложения.
Я не думаю, что проблема в том, как определяется HOC. Вы только что не торопились с его карри-версией. Однако оба HOC должны быть эквивалентными.
@ FK82, да, вы правы. Основная проблема здесь не в каррировании. Я вернул его к исходному.
@devserkan Я бы хотел использовать каррирование и HOC. чтобы улучшить свои знания о них. Я знаю, как визуализировать компонент с помощью компонента Loading обычным способом реакции.
Что вы пытаетесь сделать с this.props [propName]?