Передача свойства компоненту с использованием компонента, возвращаемого HOC, вызывает ошибку

Question

У меня есть DataComponent компонент, и это HOC:

const DataComponent = (ComposedComponent, url) => 
class DataComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            loaded: false,
            loading: false
        };
    }

    componentWillMount() {
        this.setState({loading: true});
        fetch(url)
            .then(response => response.json())
            .then(data => this.setState({
                data,
                loading: false,
                loaded: true
            }));
    }

    render() {
        return(
            <div className="data-component">
                {(this.state.loading) ? 
                    <div>Loading</div> :
                    <ComposedComponent {...this.state}/>}
            </div>
        );
    }
}

Затем я использую RandomMeUsers для рендеринга этого HOC (PeopleList - это другой компонент):

const RandomMeUsers = DataComponent(PeopleList, `https://randomuser.me/api/?results=10`);

ReactDOM.render(<RandomMeUsers/>, document.getElementById("app"));

Работает нормально, тогда я передаю count свойство RandomMeUsers так:

const RandomMeUsers = ({count}) => DataComponent(PeopleList, `https://randomuser.me/api/?results=${count}`);

ReactDOM.render(<RandomMeUsers count={10}/>, document.getElementById("app"));

Когда я запускаю его, браузер отправляет мне эту ошибку:

<strong>Warning: Functions are not valid as a React child. 
This may happen if you return a Component instead of  from render. 
Or maybe you meant to call this function rather than return it.
in RandomMeUsers</strong>

Какие проблемы возникают у моего кода?

Answer 1

@ Treyco хорошо объяснил, почему вы получаете эту ошибку. В качестве альтернативы их ответу вы можете использовать count и url следующим образом.

const RandomMeUsers = DataComponent(
  PeopleList,
  "https://randomuser.me/api/?results="
);

и внутри вашего HOC:

fetch(`${url}${this.props.count}`)
    .then(response => response.json())
    ....

Но эта логика будет менее полезна, если вашему url понадобится больше параметров в будущем. Таким образом, вместо передачи url в качестве аргумента вашему HOC, возможно, вы можете извлечь его и поместить в логику вашего реквизита. Таким образом, вы можете манипулировать вашим url где-то еще и передавать его как опору.

Answer 2

Вы преобразовали результат вашего HOC в функцию стрелки. Эта функция не заменит поведение вашего компонента и пропустит подпорки.

Уродливый синтаксис будет следующим:

const RandomMeUsers = ({ count }) => DataComponent(PeopleList, `https://randomuser.me/api/?results=${count}`);
const RandomTenUsers = RandomMeUsers({ count: 10 })

ReactDOM.render(<RandomTenUsers />, document.getElementById("app"));

А может быть, этот синтаксис правильный:

ReactDOM.render(RandomMeUsers({ count: 10 }), document.getElementById("app"));