为什么我的 this.props.data 在渲染函数之前的任何地方都未定义？

Question

数据相应地从父级传递给子级，因此它显示在渲染函数内部，但我无法将其用于我需要在渲染之前运行的异步函数。

如果您看到 data.title 和 data.link 都显示在渲染函数下，但由于某种原因它们显示此错误：

× 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

您可以做的是：

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

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

Answer 2

好吧，混合获取调用和查看代码或分开使用 dangerouslySetInnerHTML，您的 prop this.props.data 并不总是有值，这是您问题的直接来源。

所以你肯定是这样使用你的组件的<Highlight data={stuff} ... />你可以把它改成类似{stuff ? <Highlight data={stuff} ... /> : null}这样如果输入数据不是准备好了。

为什么我的 this.props.data 在渲染函数之前的任何地方都未定义？

Why my this.props.data coming undefined anywhere before render function?

reactjs

react-props

react-state-management