为何toDoList.map无渲染结果？需用cart.sku替代AS4026

问题原因 #

你写的item?.cart?.sku是错误的属性访问方式：

• toDoList里的每个item对象并没有cart属性，它们的键是AS4026、p2、p3这类字符串。item?.cart会直接返回undefined，后续的split操作自然无法执行，所以没有任何渲染结果。
• 点语法（.）只能用于访问固定名称的对象属性，而你需要用cart.sku的动态值（这里是"AS4026"）作为属性名，这时候必须用方括号语法来访问。

解决方案 #

把item?.cart?.sku?.split(";")替换为item[cart?.sku]?.split(";")，利用方括号语法实现动态属性访问。

修改后的完整代码如下：

<div>
    {cart?.sku} {/* 打印 "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>

补充说明 #

方括号语法允许我们用变量、表达式的结果作为对象的属性名，这里cart?.sku的值是"AS4026"，所以item[cart?.sku]就等价于item.AS4026，能正确获取到对应的待办字符串，执行split后就能正常渲染单选框列表了。

内容的提问来源于stack exchange，提问作者Cookie