javascript - JSreduce返回[object对象]

Question

有对象数组

this.props.comments = [{
id: "b149b076-93b1-4ac7-b913-65a7b1ee9a5b", 
addedBy: "user1", 
addedById: "3dc8e8a0-dc40-42da-ae53-f10b01a0b197", 
addedDate: "2018-10-08T10:47:46.829258", 
content: "test1"
}, {
id: "ee997e10-919c-42cc-8efb-7ea49cf5c197", 
addedBy: "user22", 
addedById: "1781e165-82f4-4a49-884c-ba66031ad0da", 
addedDate: "2018-10-08T10:41:59.264111", 
content: "test2"}]

我正在尝试使用reduce过滤和输出评论

const comments = this.props.comments.reduce((result, cm, index) => {
            if(cm.addedById === "3dc8e8a0-dc40-42da-ae53-f10b01a0b197") {
                result += <li key={index} className="task-comments__comment">
                    <p className="task-comments__comment-header">
                        <span className="task-comments__comment-author">{ cm.addedBy }</span>
                        <span
                            className="task-comments__comment-date">
                            {moment(cm.addedDate).format('DD.MM.YYYY HH:MM')}
                        </span>
                    </p>
                    <p className="task-comments__comment-text">
                        { cm.content }
                    </p>
                </li>;
            }
            return result;
        }, {});

但结果我得到

出了什么问题以及如何解决？

Answer 1

您正在连接对象。

相反，结果应该是一个数组。

const comments = this.props.comments.reduce((result, cm, index) => {
        if(cm.addedById === "3dc8e8a0-dc40-42da-ae53-f10b01a0b197") {
            result.push(<li key={index} className="task-comments__comment">
                <p className="task-comments__comment-header">
                    <span className="task-comments__comment-author">{ cm.addedBy }</span>
                    <span
                        className="task-comments__comment-date">
                        {moment(cm.addedDate).format('DD.MM.YYYY HH:MM')}
                    </span>
                </p>
                <p className="task-comments__comment-text">
                    { cm.content }
                </p>
            </li>);
        }
        return result;
    }, []);