时间戳

首页 > 解决方案 > 如何访问传递数据中的 JSON 元素？

reactjs - 如何访问传递数据中的 JSON 元素？

问题描述

我让我的父组件遍历一个数组并将每个“行”从 mongo 传递给子组件。

    <tbody>
         {this.state.claims.map ( claim => <ClaimRow claim= { claim } /> )}
    </tbody>

传递的数据如下所示：

    {"_id":"5b0d5b7f035a00f06003e6b8","claimID":"123456","claimDate":"2018-05-14T00:00:00.000Z","carrier":"BCBS NJ"}

我正在尝试访问“声明”中的所有字段，但我不知道如何正确访问该字段。由于没有状态，我使用的是纯函数。我只是列出了下面的字段，因为我无法成功地弄清楚这一点。

const ClaimRow = ( {claim} =this.props ) =>  (
      <div className="inline fields">
    <Form.Field>
      <tr>
        <td>  {JSON.stringify (claim)}  </td>
        <td>{claimID}</td>
        <td>{carrier}</td>
     </tr>

    </Form.Field>
  </div>
);

ClaimRow.propTypes = {
claim: PropTypes.string.isRequired
};

export default ClaimRow;

标签： reactjs

解决方案

在内部提供 form 和 div 标签不是正确的方法。如果要分配类名，可以分配给 td，或者给 div inside 。现在没有这些，您可以通过以下方式正确循环数据，

const ClaimRow = (props) => {
    let claim = props.claim;
    return (
      <tr>
        <td>{JSON.stringify (claim)}  </td>
        <td>{claim.claimID}</td>
        <td>{claim.carrier}</td>
     </tr>
);
}

export default ClaimRow;

推荐阅读