更新后的状态不会强制重新呈现

Question

我有这个子组件，它接收一个ID作为道具，并将其余的数据转换为自己的状态。

import React from 'react';

class ReactionBox extends React.Component {
  constructor(){
    super();

    this.state = {
      reactionClass: "content-box reactionBoxContainer hide",
      reaction_icons: []
    };
  }
  componentDidMount(e){
    this.setState({
      reactionClass: "content-box reactionBoxContainer hide showAnim"
    });
  }
  componentWillMount(e){
    var that = this;
    var reqObj = {
      request: "reaction list"
    };
    $.post( "/apicall", reqObj, function( data ) {
      that.setState({
        reaction_icons: data
      });
    });
  }
  render() {
    console.log(this.state.reaction_icons.length);
    if(this.state.reaction_icons.length > 0){
      var SingleReaction = this.state.reaction_icons.map(function(reaction) {
        console.log("map");
        return (
          <li key={reaction.id}>
            <img src={reaction.url} width={reaction.width + "px"} alt={reaction.name} />
          </li>
        );
      });
    }
    return(
      <div>
       <ul>
        {this.state.reaction_icons.legnth > 0 ? SingleReaction : 'Loading...'}
       </ul>
      </div>
    );
  }
}

export default ReactionBox;

从我的控制台日志中我可以看出，状态得到更新，以及映射函数执行的次数与更新后的状态一样多。

不幸的是，这一行：{this.state.reaction_icons.legnth > 0 ? SingleReaction : 'Loading...'}不会重新渲染或重新运行。即使更新后的状态长度大于0，它仍会打印出来＆＃34;正在加载......＆＃34;