React组件props.data未定义求助：接口数据无法传递

问题根源 #

你仅向CommentBox组件传递了url="/comments"属性，但没有传入data属性，同时组件内部也没有实现从指定URL接口获取数据的逻辑，导致this.props.data始终为undefined。而传入本地静态data时能正常工作，是因为直接将数据作为props传递给了组件。

修复方案 #

需要在CommentBox组件中添加数据请求逻辑，通过生命周期方法发起接口请求，将获取到的数据存入组件状态，再传递给CommentList。修改后的代码如下：

ReactDOM.render(
    <CommentBox url="/comments" />,
    document.getElementById('content')
);

class CommentBox extends React.Component {
    constructor(props) {
        super(props);
        // 初始化状态，避免初始渲染时CommentList拿到undefined
        this.state = { data: [] };
    }

    componentDidMount() {
        // 组件挂载后发起接口请求
        fetch(this.props.url)
            .then(response => {
                // 检查响应是否成功
                if (!response.ok) {
                    throw new Error(`HTTP错误！状态码：${response.status}`);
                }
                return response.json();
            })
            .then(fetchedData => {
                this.setState({ data: fetchedData });
            })
            .catch(error => {
                console.error('获取评论数据失败：', error);
            });
    }

    render() {
        console.log(this.state.data);
        return (
            <div className="commentBox">
                <h1>Comments</h1>
                {/* 将状态中的数据传递给CommentList */}
                <CommentList data={this.state.data} />
                <CommentForm />
            </div>
        );
    }
}

关键说明 #

• 初始化组件状态：在构造函数中设置state.data为空数组，确保CommentList初始渲染时能拿到合法的空数组，避免因undefined引发渲染错误。
• 生命周期请求数据：利用componentDidMount方法（类组件挂载完成后触发）发起fetch请求，获取接口返回的JSON数据后更新组件状态。
• 状态传递数据：将组件状态中的数据传递给CommentList，而非尝试读取未传入的this.props.data。

内容的提问来源于stack exchange，提问作者Leuan Edmonds