组件渲染

Question

我有一个Tag组件接受一个参数（bookid）并检索该特定图书的相关tags。

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>
        );
    }
}

此Tag组件将在两个位置重复使用：BookDetail组件和ReadingList组件。

在BookDetail组件的render功能中，我把：

<Tags bookid={book.bookid} />

这很好用。控制台日志显示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>

...........

也就是说，Tags组件现在应在map循环中多次生成/呈现。

问题是：虽然Tags组件在BookDetail中工作正常（当它只为一本特定书籍呈现一次时），但此Tags组件在{{1}中无效}}。根本没有控制台日志，在我看来ReadingList确实被调用了。

我能想出的唯一区别是：Tags.componentDidUpdate只会有一个BookDetail，但在Tags中，ReadingList会调用Tags。

非常感谢您的宝贵意见。