Javascript 如何在jsx中使用嵌套循环？ 在这里，我从后端API获得了CCcontact中联系人的所有数据和cc状态下的列名，我想在表中显示这些数据 为此，我在第一个映射中使用了两个映射，第一个映射获取了所有联系人数据，第二个映射用于需要在表中显示的列，但它不起作用 函数CustomColumn（）{ const[CCcontact，setCCContact]=useState（[]）； const[cc，setCc]=useState（[]）； 返回( {cc.map（（cc）=>{ 返回{cc.name}； })} /*获取联系人数据*/ {CCcontact.map（（contact）=>{ 返回( /*获取列*/ {cc.map（（列）=>{ 设c=column.name //这不管用 返回{contact.c}； })} ); })} ); }

这对我很有用

您应该将

Contact.c

更改为

Contact[c]

import "./styles.css";
import React, {useState} from 'react';

export default function CustomColumn(){
  const [CCcontact, setCCContact] = useState([
    {a: "aa"},
    {b: "bb"},
    {c: "cc"},
    {d: "dd"}
  ]);
  const [cc, setCc] = useState([
    {name: "a"},
    {name: "b"},
    {name: "c"},
    {name: "d"},
  ]);

  return (
    <>
      <div className="w-75 hi">
        <table className="table">
          <thead className="thead-dark">
            <tr>
              {cc.map((cc) => {
                  return <th scope="col">{cc.name}</th>;
                })}
            </tr>
          </thead>
          <tbody>
            {CCcontact.map((contact) => {
                return (
                  <tr>
                    {cc.map((column) => {
                        let c = column.name 
                        //this isn't working
                        return <td>{contact[c]}</td>;
                      })}
                  </tr>
                );
              })}
          </tbody>
        </table>
      </div>
    </>
  );
}

导入“/styles.css”； 从“React”导入React，{useState}； 导出默认函数CustomColumn（）{ const[CCcontact，setCCContact]=useState([ {a:“aa”}， {b:“bb”}， {c:“cc”}， {d:“dd”} ]); const[cc，setCc]=useState([ {name:“a”}， {name:“b”}， {name:“c”}， {name:“d”}， ]); 返回( {cc.map（（cc）=>{ 返回{cc.name}； })} {CCcontact.map（（contact）=>{ 返回( {cc.map（（列）=>{ 设c=column.name //这不管用 返回{contact[c]}； })} ); })} ); }

---

c

是一个动态值，即列的名称。所以它不是

contact.c

，因为它指的是一个按字面意思命名为“c”的属性。对于动态键，您使用方括号，即

contact[c]

将

contact.c

更改为

contact[c]

import "./styles.css";
import React, {useState} from 'react';

export default function CustomColumn(){
  const [CCcontact, setCCContact] = useState([
    {a: "aa"},
    {b: "bb"},
    {c: "cc"},
    {d: "dd"}
  ]);
  const [cc, setCc] = useState([
    {name: "a"},
    {name: "b"},
    {name: "c"},
    {name: "d"},
  ]);

  return (
    <>
      <div className="w-75 hi">
        <table className="table">
          <thead className="thead-dark">
            <tr>
              {cc.map((cc) => {
                  return <th scope="col">{cc.name}</th>;
                })}
            </tr>
          </thead>
          <tbody>
            {CCcontact.map((contact) => {
                return (
                  <tr>
                    {cc.map((column) => {
                        let c = column.name 
                        //this isn't working
                        return <td>{contact[c]}</td>;
                      })}
                  </tr>
                );
              })}
          </tbody>
        </table>
      </div>
    </>
  );
}