Реактивное значение реквизита не определено - PullRequest
Новая
       88

Реактивное значение реквизита не определено

1 голос
/ 03 мая 2020

Это мой родительский код: 

class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tags: [],
        };
    }
    componentDidMount() {
        this.getTags();
    }

    getTags() {
        //method gets tags from the backend
    }
    render() {
        return <Child tags={this.state.tags} />;
    }
}

И это в основном мой дочерний компонент: 

export default class Child extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tags: props.tags,
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            tags: nextProps.tags,
        });
    }
}

Но когда я консоль тегов журнала где-то в компоненте Child, это не определено Может быть, он не определен, потому что дочерний компонент визуализируется до того, как родительский компонент вызывает метод getTags? Или есть другие проблемы с этим кодом? И как я могу избежать этой проблемы, что теги не определены в дочернем компоненте?

Cheers

Ответы [ 2 ]

2 голосов
/ 03 мая 2020

Чтобы избежать вашей проблемы, вы не должны рендерить ваш Child компонент, пока this.state.tags не получит каких-либо полезных значений.

Вот как вы можете это сделать, а также отобразить «Загрузка .. текст, чтобы пользователь не беспокоился, что страница сломана. 

class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tags: [],
        };
    }
    componentDidMount() {
        this.getTags();
    }

    getTags() {
        //method gets tags from the backend
    }
    render() {
        return this.state.tags.length ? (
            'Loading...'
        ) : (
            <Child tags={this.state.tags} />
        );
    }
}
0 голосов
/ 03 мая 2020

Ваш дочерний компонент будет определенно отображаться с пустым массивом 'tags' как опора. Затем, когда getTags () возвращает данные, массив вновь заполненных тегов будет передан дочернему элементу в качестве реквизита, что заставит дочерний элемент повторно выполнить рендеринг с новыми данными.

Это должен быть пустой массив хотя не "неопределенный". Вы можете проверить ваш метод getTags () и API, который вы вызываете, чтобы убедиться, что вы не получили «undefined» оттуда.

componentWillReceiveProps является устаревшим и не должен использоваться. Для получения подробной информации см. Следующую ссылку в документации React: https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops

Эта документация поможет вам разобраться, что делать, если вам необходимо выполнить побочные эффекты в результате смены реквизита.

В настоящее время componentWillReceiveProps может только установить локальное состояние для реквизита, что совершенно излишне. Есть ли что-то еще, что вам нужно сделать там?

...