Почему мой this.props.data не определен нигде перед функцией рендеринга?

Question

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

Если вы видите data.title а также data.link все showa под функцией render, но по какой-то причине они показывают эту ошибку:

× TypeError: Cannot read property 'link' of null

Что я могу альтернативно сделать?

 export default class Highlight extends Component {

state = {
    htmlString: ''
}

 fetchActivity = () => {

    axios({
        method: 'post',
        url: 'api/singleactivity',
        data: { activityLink: "http://play.fisher-price.com" + this.props.data.link }
    })
        .then((res) => {
            this.setState({
                htmlString: res.data
            })
        })
        .catch((err) => {
            console.log('There was an error fetching data', err);
        })

}

componentDidMount() {
    this.fetchActivity()
}

 render() {

    if (this.props.visibility.highlight) {

        return (
            <div>
                <section className="card bg-info"
                    aria-label="Book Detail">
                    <div className="bg-secondary">
                        <h2>{this.props.data.title}</h2>
                        <h2>{this.props.data.link}</h2>
                        <h2>{this.props.data.imageLink}</h2>
                    </div>
                    <br />
                    <div className="row" dangerouslySetInnerHTML={{ __html: this.state.htmlString }}>
                    </div>
                    <br />
                    <div className="bg-warning">
                        {!this.props.visibility.favorites ?
                            <button onClick={() => this.addToFavorites()}> Favorite</button> :
                            <button onClick={() => this.removeFromFavorites()}> Remove</button>}
                    </div>
                </section>
                <br />
            </div>
        )
    } else {
        return null;
    }

}

Answer 1

Хорошо, смешивая вызовы извлечения и просмотра кода или используя опасно SetInnerHTML, ваша опора this.props.data не всегда имеет значение, и это является прямым источником вашей проблемы.

Так что, конечно, вы используете свой компонент таким образом <Highlight data={stuff} ... /> Вы можете изменить это на что-то вроде {stuff ? <Highlight data={stuff} ... /> : null} поэтому компонент не будет создан в первую очередь, если входные данные еще не готовы.

Answer 2

Что вы можете сделать, это:

{this.props.data ? this.props.data.title : ''}

{this.props.data ? this.props.data.link: ''}