Question

我有以下代码：

<script>
var vid = document.getElementById("myVideo"); 
vid.addEventListener('ended', function(){
    vid.poster = "images/poster_test.png";
    vid.src = "";
    vid.controls = false;
}); 
</script>

这里我通过调用api在componentDidMount（）方法中设置状态。渲染中的console.log实际上将数组长度设置为3.但是没有显示任何内容。

AuthorApi.js

    import React from "react";
import * as AuthorApi from "../../../api/authorApi";

export default class Authors extends React.Component {
    state = {
        authors: []
    };
    constructor(props) {
        super(props);
    };

    componentDidMount() {
        this.setState({ authors: AuthorApi.getAllAuthors() });
    }
    render() {
        return <div>
            <h2>Authors</h2>
            <table className="table table-striped">
                <thead>
                    <tr>
                    <th>ID</th>
                    <th>Name</th>
                    </tr>
                </thead>
                <tbody>
                    {console.log("Inside: " + this.state.authors.length)}
                    {this.state.authors.map((author) => { 
                        <tr key={author.id}>
                            <td><a href={"/#authors/" + author.id}>{author.id}</a></td>
                            <td>{author.firstName} {author.lastName}</td>
                        </tr>
                    }, this)}
                </tbody>
                </table>
        </div>;
    }
    }

请让我知道我做错了什么。

Answer 1

尝试在地图中添加回报。

this.state.authors.map((author) => { 
                        return (<tr key={author.id}>
                            <td><a href={"/#authors/" + author.id}>{author.id}</a></td>
                            <td>{author.firstName} {author.lastName}</td>
                        </tr>)
                    }, this)}

componentDidMount未设置状态或重新呈现

1 个答案: