Javascript 函数在react JSX中不返回值

因此，我有一个模块，呈现当前月份的日历。看起来像这样

let days = {0: 'Sun', 1: 'Mon', 2: 'Tue', 3: 'Wed', 4: 'Thu', 5: 'Fri', 6: 'Sat'};
let today = new Date();
today.setDate(1);
let dayOfWeek = today.getDay();
let count = 0;

class Calender extends Component {
    constructor(props) {
        super(props);
        this.calRender = this.calRender.bind(this);
     }

    calRender(x) {Object.keys(days).map(index => {count++;
                 return <td key={x+index} style={{...styleVars.defaultTextColor, ...styleVars.blockSize, backgroundColor: '#777'}}>{count}</td>})}


    render() {



        return(
            <table>
                    <tr>
                        {Object.keys(days).map((index) => <th key={index} style={{...styleVars.defaultTextColor, ...styleVars.blockSize, backgroundColor: '#232'}}>{days[index]}</th>)}
                    </tr>
                    <tr>
                        {Object.keys(days).map(index => {
                                                if(index < dayOfWeek) {
                                                    return <td key={index} style={{...styleVars.defaultTextColor, ...styleVars.blockSize, backgroundColor: '#bbb'}}></td>}
                                                else {count++;
                                                      return <td key={index} style={{...styleVars.defaultTextColor, ...styleVars.blockSize, backgroundColor: '#777'}}>{count}</td>}
                                                })}
                    </tr>
                    <tr>
                    {this.calRender(7)}
                    </tr>
                    <tr>
                    {this.calRender(14)}
                    </tr>
                    <tr>
                    {this.calRender(21)}
                    </tr>
                    <tr>
                    {this.calRender(21)}
                    </tr>

            </table>

        )
    }
}

let days={0:'Sun'，1:'Mon'，2:'Tue'，3:'Wed'，4:'Thu'，5:'Fri'，6:'Sat'}；
让今天=新日期（）；
今天。设定日期（1）；
让dayOfWeek=today.getDay（）；
让计数=0；
类日历扩展组件{
建造师（道具）{
超级（道具）；
this.calRender=this.calRender.bind（this）；
}
calRender（x）{Object.keys（days.map）（索引=>{count++）；
返回{count}}}
render（）{
返回(
{Object.keys（days）.map（（index）=>{days[index]}）}
{Object.keys（days.map）（索引=>{
如果（指数<星期几）{
返回}
else{count++；
返回{count}
})}
{this.calRender（7）}
{this.calRender（14）}
{this.calRender（21）}
{this.calRender（21）}
)
}
}

---

问题是calRender函数没有返回任何内容，即使它应该返回带有日期的标记。当我在没有函数的情况下执行此操作时（通过为每个标记编写map语句），它工作得很好。请指出我把这件事弄糟的地方。

您的calRender方法不会返回任何内容。在map函数的回调中确实有一个return语句，但这还不够

通过添加return语句修复此问题：

calRender(x) {
    return Object.keys(days).map(index => {
        count++;
        return <td key={x+index} style={{...styleVars.defaultTextColor, ...styleVars.blockSize, backgroundColor: '#777'}}>{count}</td>};
    );
}

calRender（x）{
返回Object.keys（天）.map（索引=>{
计数++；
返回{count}；
);
}

您的calRender方法不会返回任何内容。在map函数的回调中确实有一个return语句，但这还不够

通过添加return语句修复此问题：

calRender(x) {
    return Object.keys(days).map(index => {
        count++;
        return <td key={x+index} style={{...styleVars.defaultTextColor, ...styleVars.blockSize, backgroundColor: '#777'}}>{count}</td>};
    );
}

calRender（x）{
返回Object.keys（天）.map（索引=>{
计数++；
返回{count}；
);
}

您的calRender方法不会返回任何内容

按如下方式编辑calRender方法：

calRender(x) {
   return Object.keys(days).map(index => {
      count++;
      return (
        <td key={x+index} style={{...styleVars.defaultTextColor, ...styleVars.blockSize, backgroundColor: '#777'}}>
          {count}
        </td>
      )
   })
}

calRender（x）{
返回Object.keys（天）.map（索引=>{
计数++；
返回(
{count}
)
})
}

您的calRender方法不会返回任何内容

按如下方式编辑calRender方法：

calRender(x) {
   return Object.keys(days).map(index => {
      count++;
      return (
        <td key={x+index} style={{...styleVars.defaultTextColor, ...styleVars.blockSize, backgroundColor: '#777'}}>
          {count}
        </td>
      )
   })
}

calRender（x）{
返回Object.keys（天）.map（索引=>{
计数++；
返回(
{count}
)
})
}

我已经用

let count=0

语句初始化了顶部的count。@Sanchit您应该在这种情况下使用state。我已经用

let count=0

语句初始化了顶部的count。@Sanchit在这种情况下，您应该使用state。