ReactJs-渲染中的函数不'；我没有出现

**

更新：这个问题有一个有效的答案。重要的是 请注意，即使函数中有return语句 在render（）中调用，包裹整个循环仍然很重要 在父级“返回”中，以便在状态下正确渲染 改变。这是一个不更新状态的不同常见问题 正确。

我有以下ClientList组件，它显示了从数据库检索到的客户列表

在下面的Render（）函数中，我调用showList函数，该函数将在填充this.props.clientList Reducer后显示一个列表

问题是。。。如果我直接在Render（）方法中调用showList代码，它将显示

如果我将它放在showList函数中，并调用{this.showList}，它不会显示在渲染中

我还有控制台的屏幕截图，显示列表已经填充

这种方法是不允许的吗？我看到很多教程教我们这样做，但对我来说不起作用。使用此方法返回渲染代码有哪些限制

class ClientList extends Component {

    constructor(props) {
        super(props);

        this.state = {
            clientId : ''

        }
        this.getClientList = this.getClientList.bind(this);
        this.showList = this.showList.bind(this);
        console.log('initializing', this.props);
    }

    componentDidMount(){
        this.getClientList();
    }

    getClientList() {
        if (this.props.actions) {
        this.props.actions.getClientList(); //This is an ajax action to retrieve from Api
        }

    }

    showList() {

            //If i put all the codes below directly in Render, it will show.
            console.log('props from showList', this.props.clientList);

                        this.props.clientList && Object.keys(this.props.clientList).reverse().map((index,key) => {

                     return (

                     <div key={key}>
                     <div><a onClick={() => this.showProfileBox(this.props.clientList[index].customerId)}>Name: {this.props.clientList[index].firstname} {this.props.clientList[index].lastname}</a><span className="pull-right"><Link to={"/client/" + this.props.clientList[index].customerId}>Edit</Link></span></div>

                     </div>
                    );
                })
        }

    render() {
        console.log('rendering', this.props);
        return (

                <div>

                <Col xs={12} md={8}>
                <h1>Client List</h1>

                { this.showList() }  // <= This function doesn't print
                </Col>

                </div>
            )
    }

}

function mapStateToProps(state) {

    return {
        clientList: state.clientList,

    };
}

function mapDispatchToProps(dispatch) {  
  return {
    actions: bindActionCreators(clientActions, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(ClientList);

类ClientList扩展组件{
建造师（道具）{
超级（道具）；
此.state={
客户端ID:'
}
this.getClientList=this.getClientList.bind（this）；
this.showList=this.showList.bind（this）；
console.log（'initialization'，this.props）；
}
componentDidMount（）{
这是.getClientList（）；
}
getClientList（）{
如果（此.props.actions）{
this.props.actions.getClientList（）；//这是要从Api检索的ajax操作
}
}
showList（）{
//如果我把下面的所有代码直接放在渲染中，它就会显示出来。
log（'showList中的props'，this.props.clientList）；
this.props.clientList&&Object.keys（this.props.clientList）.reverse（）.map（（index，key）=>{
返回(
您不需要在构造函数中绑定
showList

去掉它，你就会没事了

此外，正如@JayabalajiJ所指出的，您需要从
showList
中返回一些内容，否则您将看不到最终结果


类ClientList扩展React.Component{
构造函数（）{
超级（）
this.handleClick=this.handleClick.bind（this）
}
handleClick（）{
console.log（'单击'）
}
showList（）{
从展示列表返回
}
render（）{
返回(
点击我
{this.showList（）}
)
}
}
ReactDOM.render(
,
document.getElementById（'root'））
)
您应该从showList（）方法返回值。到目前为止，您返回的是map方法的值，而不是整个showList（）方法的值。因此，它在页面中没有绘制任何内容
`

showList（）{
返回(
//删除不必要的{}
this.props.clientList&&Object.keys（this.props.clientList）.reverse（）.map（（index，key）=>{
返回(
this.showProfileBox（this.props.clientList[index].customerId）}>名称：{this.props.clientList[index].firstname}{this.props.clientList[index].lastname}编辑
);
})
);
}

`
@SomeoneSpecial
这个.props.clientList
看起来怎么样？可能是空的。显然上面关于返回整个循环的答案是有效的！谢谢！也请接受任何答案来结束问题。还有一个额外的问题{在你的第一次返回后，它不起作用，但是如果我去掉那个花括号，它就起作用了！对不起！！。我没有签入小提琴。我只是粘贴了代码
showList() {
    return (
 //removed unnecessary {}
       this.props.clientList && Object.keys(this.props.clientList).reverse().map((index,key) => {    
          return (
             <div key={key}>
               <div><a onClick={() => this.showProfileBox(this.props.clientList[index].customerId)}>Name: {this.props.clientList[index].firstname} {this.props.clientList[index].lastname}</a><span className="pull-right"><Link to={"/client/" + this.props.clientList[index].customerId}>Edit</Link></span></div>
             </div>
             );
      })
  );
}