Question

我计划为每个人映射对象中的每个项目（联系人号码）将其放入并将其分隔为逗号'，' 当我使用 data.contact_number 时，输出将合并到数组中的所有字段。

const ContactList = (props) => (
          <div>
              <table>
                  <thead>
                    <tr>
                      <th>Name</th>
                      <th>Contact Numbers</th>
                      <th>Address</th>
                      <th>Email</th>
                      <th>Note</th>
                    </tr>
                  </thead>
                  <tbody>
                    {props.data.map(data =>
                    <tr key={data.id}>
                      <td>{data.name}</td>
                          {props.data[data.id].contact_number.map(cn =>   
                           <td>{cn}</td>
                          )}
                      <td>{data.address}</td>
                      <td>{data.email}</td>
                      <td>{data.note}</td>
                    </tr>
                    )}
                  </tbody>
              </table>
          </div>  
        )

这是我的数据：

 {
        "id": 7,
        "name": "sd",
        "email": "ajot@qwe.com",
        "address": "testAddress",
        "note": "testNote",
        "contact_number": [
            "11",
            "12",
            "31",
            "41",
            "51",
            "61"
        ]
    }

错误：

未捕获（在承诺中）TypeError：无法读取属性“contact_number” 未定义的

Answer 1

替换它：

{props.data[data.id].contact_number.map(cn =>   
  <td>{cn}</td>
)}

由此：

{data.contact_number.map(cn =>   
  <td>{cn}</td>
)}

props.data[data.id]未定义，因为props.data[data.id]不等于data

Answer 2

数据路径错误：

props.data[data.id].contact_number

或数据必须像

那样构建

[7 : {
    "name": "sd",
    "email": "ajot@qwe.com",
    "address": "testAddress",
    "note": "testNote",
    "contact_number": [
        "11",
        "12"
    ]
  },
 8 : { ... },
 0 : { ... }
]

Answer 3

试试这个：

const ContactList = (props) => (
      <div>
          <table>
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Contact Numbers</th>
                  <th>Address</th>
                  <th>Email</th>
                  <th>Note</th>
                </tr>
              </thead>
              <tbody>
                {props.data.map(data =>
                <tr key={data.id}>
                  <td>{data.name}</td>
                  <td>{data.contact_number.map(cn => cn).join(', ')}</td>
                  <td>{data.address}</td>
                  <td>{data.email}</td>
                  <td>{data.note}</td>
                </tr>
                )}
              </tbody>
          </table>
      </div>  
    )

我改变的这一行应该会给你你想要的效果： {data.contact_number.map(cn => cn).join(', ')}将所有contact_number值写入以逗号分隔的字符串。

Answer 4

你需要解析你的json。

JSON.parse(yourJson)将数据转换为JavaScript对象。

JSON.parse(props.data).map(data => ...

Answer 5

如果您看到正确的数据不是数组，那么您就无法使用map。你可以选择这个。

const ContactList = (props) => (
    <div>
        <table>
            <thead>
              <tr>
                <th>Name</th>
                <th>Contact Numbers</th>
                <th>Address</th>
                <th>Email</th>
                <th>Note</th>
              </tr>
            </thead>
            <tbody>
                <tr key={this.props.data.id}>
                <td>{this.props.data.name}</td>
                {this.props.data.contact_number.map((contact_number)=>{
                    <td>{contact_number}</td>
                })}                
              </tr>
            </tbody>
        </table>
    </div>  
)

在地图中映射数组对象 - ReactJS

5 个答案: