Javascript 组件渲染

我有一个

Tag

组件，它接受一个参数（一个

bookid

），并检索特定书籍的相关

标记

class Tags extends Component {
    constructor(props) {
        super(props);
        this.state={
            tags: '',
            bookid: ''
        };
    }
    componentDidUpdate(prevProps, prevState) {
        if(prevState.bookid===this.props.bookid) {
            console.log(prevState);
            console.log(this.state);
            return;
        }

        var URI='http://api/book/tagsByBookId/'+this.props.bookid;
        console.log(URI);

        fetch(URI)
            .then(response => {
                return response.json();
            })
            .then(json => {
                console.log(json);
                this.setState({
                    tags: json.out,
                    bookid: this.props.bookid

                });
            });
    }

    render() {
        let tags=this.state.tags;

        return (
            <div className="feature">
                <div className="icon">
                    <i className="glyphicons tags" />
                </div>
                <div className="text">
                    <h3>TAG</h3>
                    <small>
                        {
                            Object.keys(tags).map(function(tag,i) {


                                return (
                           <span id={"tag-"+tag} key={"tag-"+tag}><a href={"/books/list/tag/"+tags[i].tag}>{tags[i].tag}</a>&nbsp;&nbsp;</span>
                                );
                            })
                        }

                    </small>&nbsp;&nbsp;

                    <br />
                </div>
            </div>
        );
    }
}

这个很好用。控制台日志显示了
Tags.componentDidUpdate（）
函数的输出

在
ReadingList
组件的
render
函数中，我将：

Object.keys(readings).map((reading, index) => {
    let book=readings[index].book;
    console.log("Reading mapping:"+book.bookid);
    return (
        <table key={"review-" + index} className="table">
             <tbody>
                  <tr>
                      <td className="col-sm-3">
                           <img src="..."/>
                      </td>
                      <td className="col-sm-3">
                           <a href="...">{book.title}</a>
                      </td>
                      <td className="col-sm-2">{book.author}</td>
                      <td className="col-sm-3">
                            <Tags key={book.bookid} bookid={book.bookid} />
                      </td>

Object.keys（readings）.map（（reading，index）=>{
让书本=阅读[索引]。书本；
log（“读取映射：+book.bookid”）；
返回(
{book.author}


也就是说，现在应在
映射
循环中多次生成/呈现
标记
组件

问题是：虽然
标记
组件在
BookDetail
中工作正常（对于一本特定的书，它只渲染一次），此
标记
组件在
读取列表
中不工作。根本没有控制台日志，在我看来，
标记。componentDidUpdate
确实会被调用

我能找出的唯一区别是：
BookDetail
将只有一个
标记
，但在
ReadingList
中，
标记
由
映射调用

非常感谢您的宝贵意见。
即使是用于“读取映射”的控制台日志，也没有控制台日志：+book.bookid？你能发布你的ReadingObject的结构吗？Reading Mapping:12345…正在显示，表的其余部分也在显示。只是缺少标记部分`顺便说一句，readings对象结构非常非常长，因为它有嵌套的表。
Object.keys(readings).map((reading, index) => {
    let book=readings[index].book;
    console.log("Reading mapping:"+book.bookid);
    return (
        <table key={"review-" + index} className="table">
             <tbody>
                  <tr>
                      <td className="col-sm-3">
                           <img src="..."/>
                      </td>
                      <td className="col-sm-3">
                           <a href="...">{book.title}</a>
                      </td>
                      <td className="col-sm-2">{book.author}</td>
                      <td className="col-sm-3">
                            <Tags key={book.bookid} bookid={book.bookid} />
                      </td>