是否有更短的方法來呈現此代碼？

Question

我正在嘗試將來自 a.json 的輸入數據渲染到 React 上的待辦事項列表的容器中。 我在容器上顯示了日期，但下面的代碼是針對個別日期的。 到目前為止，我只是復制+粘貼了七次並更改了日期。

            <h4 className="day">Monday:</h4>          
            {renderTasks.map((time) => {
                if (time.day === 'Monday') {return (
                <div className="taskBox" key={time.id}>
                    <span className="renderTime">
                        {time.hour}:{time.minute}{time.time}</span>
                    <span className="renderTask">{time.task}</span>
                </div>)}
            })
        }

我想知道是否有一種方便的方法來提取數據並在 React 的特定日期下呈現它們？ （例如：如果 time.day.== '' 在這一天下方顯示數據）我非常感謝您的幫助。 我一直在學習 React。

Answer 1

您可以有一個工作日數組，並遍歷它以單獨渲染每個工作日。 像這樣的東西：

聲明列表

const weekdays =['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];

使成為

{weekdays.map(weekday =>(
<>
<h4 className="day">{weekday}:</h4>          
            {renderTasks.filter(time=>time.day===weekday).map((time) => {
                return (
                <div className="taskBox" key={time.id}>
                    <span className="renderTime">
                        {time.hour}:{time.minute}{time.time}</span>
                    <span className="renderTask">{time.task}</span>
                </div>)
            })
</>)