地图没有显示任何东西

Question

var toDoList = [{ AS4026: "7am-exercise; 8am-eat; 9am-school" },
    { p2: "12pm-lunch; 1pm-see friends" },
    { p3: "6pm-dinner; 8pm-drink medicines; 10pm-sleep" }
    ];

<div>
                                                    {cart?.sku} {/* print "AS4026" */}

                                                    {toDoList.map((item, index) => (                                                     
                                                        <div key={index}>{item?.cart?.sku?.split(";").map(toDo => (                                                    
                                                            <div key={toDo}>
                                                                <input type="radio" name="p1" value={toDo} onChange={() => changeID(toDo)} />{toDo}
                                                            </div>
                                                        ))}</div>
                                                    ))}
                                                </div>

为什么

toDoList.map

什么也没显示？

Answer 1

您似乎正在尝试从

sku

中的每个项目访问

toDoList

属性，但

toDoList

的结构与您的期望不符。

toDoList

数组包含键

(AS4026, p2, p3)

不一致并且没有

cart

属性的对象。如果您尝试显示与每个键关联的任务，您可以像这样调整数据结构：

var toDoList = [
  { AS4026: ["7am-exercise", "8am-eat", "9am-school"] },
  { p2: ["12pm-lunch", "1pm-see friends"] },
  { p3: ["6pm-dinner", "8pm-drink medicines", "10pm-sleep"] }
];

<div>
  {cart?.sku} {/* print "AS4026" */}
  {toDoList.map((item, index) => (
    <div key={index}>
      {Object.entries(item).map(([key, value]) =>
        value.map((toDo, i) => (
          <div key={i}>
            <input
              type="radio"
              name="p1"
              value={toDo}
              onChange={() => changeID(toDo)}
            />
            {toDo}
          </div>
        ))
      )}
    </div>
  ))}
</div>;

在此，

toDoList

是一个对象数组，其中每个键对应一个任务列表。每个任务列表都是代表各个任务的字符串数组。这种结构允许您映射每个任务列表并将任务显示为单选按钮选项。