Question

我的父组件迭代遍历数组并将每个“行”从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;

Answer 1

您应该通过this.props.claim访问，

SELECT COUNT(*) AS count, EXTRACT(MONTH FROM start_date) AS mnth, 
       AVG(cost) AS avg 
FROM repairs
GROUP BY EXTRACT(MONTH FROM start_date);

你甚至可以说const {claim} = this.props，所以你不需要每次都输入this.props

Answer 2

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

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;

Answer 3

Thx Rohit，道具日志帮助解决了这个问题。两次调用组件导致奇怪的行为并突出显示它很快就解决了。

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

3 个答案: