Как бороться с возвратом данных в методе рендеринга? - PullRequest
Новая
       29

Как бороться с возвратом данных в методе рендеринга?

1 голос
/ 31 января 2020

Я вызываю const в render(), который ничего не возвращает из-за отсутствия данных в базе данных, и я не знаю, как с этим справиться, чтобы, когда нечего возвращать, просто не отображать ничего , Он отображает сообщение об ошибке: "Нарушение инварианта: Компонент (...): Ничего не было возвращено при рендеринге. Обычно это означает, что отсутствует оператор возврата. Или, если ничего не отображается, возвращается ноль." 

render() {
    const food_menu = this.restaurantMenu(1, 'Menu');

    return (
        <View style={{ flex: 1 }}>
            <ScrollView style={style_2.scrollview} scrollEventThrottle={200} directionalLockEnabled=true}>

                {food_menu}

            </ScrollView>
        </View >
    );
}

Редактировать (возврат из food_menu): 

    $$typeof: Symbol(react.element)
type: {$$typeof: Symbol(react.forward_ref), displayName: "View", render: ƒ}
key: null
ref: null
props: {style: {…}, children: Array(3)}
_owner: FiberNode {tag: 1, key: null, stateNode: selected_restaurant, elementType: ƒ, type: ƒ, …}
_store: {validated: false}
_self: null
_source: {fileName: "C:\vvv\ddd\selected_restaurant.js", lineNumber: 428}
__proto__: Object

Ответы [ 2 ]

0 голосов
/ 31 января 2020

Предполагая, что this.restaurantMenu() возвращает компонент Valid React, это должно помочь вам. 

render() {
    const food_menu = this.restaurantMenu(1, 'Menu');

    return (
        <View style={{ flex: 1 }}>
            <ScrollView style={style_2.scrollview} scrollEventThrottle={200} directionalLockEnabled=true}>

                {food_menu ? food_menu || null}

            </ScrollView>
        </View >
    );
}

Очевидно, есть лучшие способы go об этой проблеме. Можно было бы установить состояние внутри restaurantMenu, указывающее на успешную загрузку меню ресторана, а затем на соответствующее рендеринг. В этом случае условный рендеринг изменится на:

{menuLoaded ? food_menu : null }

0 голосов
/ 31 января 2020

Вы можете посмотреть на условный рендеринг.

Дополнительная информация: https://reactjs.org/docs/conditional-rendering.html

Пример: 

render() {
    const food_menu = this.restaurantMenu(1, 'Menu');

    return (
        <>
            {food_menu && <View style={{ flex: 1 }}>
                <ScrollView style={style_2.scrollview} scrollEventThrottle={200} directionalLockEnabled=true}>

                    {food_menu}

                </ScrollView>
            </View >}
        </>
    );
}
...