试图在React中映射数组，但未定义

Question

Below is a section of my render and then the component that it references. I am getting "li not defined". I have tried wrapping it in {} and at this point not sure what I am missing. Thanks for the help.

Render section:

var uls = _.chunk(_.take(this.state.results, maxICanShow), perColumn);

    return (
        <div>
        uls.map((lis) => {
            <ul className="appt_bd">
                <li className="appt_bd_header" style={{ width: colWidth + '%' }}>
                    <span className="appt_bd_header_main">{this.props.title}</span>
                    <span className="appt_bd_header_sub">Appts Set</span>
                    <span className="appt_bd_header_sub">Appts Show</span>
                </li>
                lis.map((li) => <AppointmentBoardRow key={li.userId} row={li} />)
            </ul>
        })
            </div>
    );

Here is the component it references:

var AppointmentBoardRow = React.createClass({
render: function () {
    var row = this.props.row;
    return (
        <li className="appt_bd_row" style={{ width: this.props.colWidth + '%' }} key={row.userId}>
            <span className="appt_bd_desc">
                <span className="appt_bd_rank">{row.rank}</span>
                <span className="appt_bd_avatar_container"><div className={row.className}><span className="initials">{row.initials}</span></div></span>
                <span className="appt_bd_user">
                    <span className="appt_bd_description_main">{row.userName}</span>
                    <span className="appt_bd_description_sub">{row.role}</span>
                </span>
            </span>
            <span className="appt_bd_data">
                <span className="appt_bd_data_main">{row.apptsSetCount}</span>
                <span className="appt_bd_data_sub">/{row.apptsSetGoal}</span>
            </span>
            <span className="appt_bd_data">
                <span className="appt_bd_data_main">{row.apptsShowCount}</span>
                <span className="appt_bd_data_sub">/{row.apptsShowGoal}</span>
            </span>
        </li>
    );
}

});

Answer 1

It looks like there are a couple of small syntax errors in your first code snippet. Specifically, the call to uls.map is javascript within html syntax, so should be wrapped in {}. The same applies to lis.map .

Additionally, uls.map((lis) => { <ul>...</ul> } is a function that does not return anything. You might instead want to represent it as uls.map((lis) => ( <ul>...</ul> ) , or uls.map((lis) => { return (<ul>...</ul>) } . You might want to use the latter and set a debugger to figure out what exactly is happening to the passed in data if the problem still persists.

I took a pass at fixing the syntax errors I mentioned above, hope this helps.

var uls = _.chunk(_.take(this.state.results, maxICanShow), perColumn);

return (
    <div>
        {
            uls.map((lis) => (
                <ul className="appt_bd">
                    <li className="appt_bd_header" style={{ width: colWidth + '%' }}>
                        <span className="appt_bd_header_main">{this.props.title}</span>
                        <span className="appt_bd_header_sub">Appts Set</span>
                        <span className="appt_bd_header_sub">Appts Show</span>
                    </li>
                    { lis.map((li) => <AppointmentBoardRow key={li.userId} row={li} />) }
                </ul>
            )
        }
    </div>
);