Question

我目前正在观看React Path @ PluralSight（顺便说一句，这很棒）我正在解决两个组件的问题。

我有一个名为Authors的组件，它位于：

class Authors extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            authors: []
        };
    }
    componentDidMount() {
        if (this.isMounted()){
            this.setState({ authors: AuthorApi.getAllAuthors() });
        }
    }
    render() {
        return(
            <div className="container">
                <h1>Authors</h1>
                <hr />
                <AuthorList authors={this.state.authors} />
            </div>
        );
    }
}

组件AuthorList，在这里：

const AuthorList = (props) => {
    const createAuthorRow = (author) => {
        return(
            <tr key={author.id}>
                <td><a href={"/#authors/" + author.id}>{author.id}</a></td>
                <td>{author.firstName} {author.lastName}</td>
            </tr>
        );
    };
    return( 
        <div>
            <table className="table">
                <thead>
                    <th>id</th>
                    <th>Name</th>
                </thead>
                <tbody>
                    {this.props.authors.map(createAuthorRow, this)}
                </tbody>
            </table>
        </div>
    );
};

问题是他们没有渲染！它们都在同一个文件中，不知怎的，他们不会渲染。我曾尝试为每个文件制作单独的文件，但它们仍然无法渲染。我错过了什么吗？

Answer 1

您是否在控制台中收到任何运行时异常？正如你的问题所写 - 你应该 - 这就是你没有看到任何渲染的原因。

这里实现的

AuthorList是无状态功能组件。您在组件中引用this - 函数组件中的this引用该函数，而不是将props定义为this的React类 - 道具作为传入一个参数 - 你可以直接引用它。

所以改变

<tbody>
    {this.props.authors.map(createAuthorRow, this)}
</tbody>

到

<tbody>
   {props.authors.map(createAuthorRow)}
</tbody>

另外 - 请查看this article on the React team deprecating isMounted 正如你所说 - 这不是一个功能 - 以及上面的建议 - 删除它。您已经在使用componentDidMount生命周期方法 - 在您调用此示例时，从您的后端获取结果对于您正在使用的示例很好。

为什么我的组件无法呈现？

1 个答案: