如何在 React 组件之间传递 json 值答案

【问题标题】：How to pass json values between React component如何在 React 组件之间传递 json 值
【发布时间】：2020-04-30 18:48:05
【问题描述】：

我有一个关于在之间传递json数据的问题，我有组件PassTestData/ComA/ComB，数据在PassTestData中导入并希望传递给ComA。但是，有一条错误消息“TypeError：data.map 不是函数”。以下是我的代码。

通过测试数据

Import data from ‘../data.json’
const PassTestData = () => {
  return (
    <div>
      < ComA data={data} />
    </div>
  );};

ComA

const ComA = props => {
  const data = props;
  return (
    <Card>
      <CardTitle>
        <EmailViewHeader />
      </CardTitle>
      <Table hover>
        <thead>
          <tr>
            <th>
              Title A
            </th>
            <th>
              Title B
            </th>
            <th>
              Title C
            </th>
            <th>
              Title D
            </th>
            <th>
              Title E
            </th>
          </tr>
        </thead>
        <tbody>
          {data.map(row => (
            <ComB
              A={row.A}
              B={row.B}
              C={row.C}
              D={row.D}
              E={row.E}
            />
          ))}
        </tbody>
      </Table>
    </Card>
  );
};
export default ComA;

ComB

const ComB = props => {
  const { A, B, C, D, E } = props;
  return (
    <tr>
      <td>{A}</td>
      <td>{B}</td>
      <td>{C}</td>
      <td>{D}</td>
      <td>{E}</td>
    </tr>
  );
};

export default ComB ;

data.json

[
    {
      "A": "dataA",
      "B": "dataB",
      "C": "dataC",
      "D": "dataD",
      "E": "dataE"
    },
    {
      "A": "dataA_2",
      "B": "dataB_2",
      "C": "dataC_2",
      "D": "dataD_2",
      "E": "dataE_2"
    },
   ]

谢谢！

【问题讨论】：

标签： javascript json reactjs frontend

【解决方案1】：

定义为const data = props.data; 或const {data}= props;

const ComA = props => {
  const data = props.data;
  return (
    <Card>
      <CardTitle>
        <EmailViewHeader />
      </CardTitle>
      <Table hover>
        <thead>
          <tr>
            <th>
              Title A
            </th>
            <th>
              Title B
            </th>
            <th>
              Title C
            </th>
            <th>
              Title D
            </th>
            <th>
              Title E
            </th>
          </tr>
        </thead>
        <tbody>
          {data.map(row => (
            <ComB
              A={row.A}
              B={row.B}
              C={row.C}
              D={row.D}
              E={row.E}
            />
          ))}
        </tbody>
      </Table>
    </Card>
  );
};

【讨论】：

@LoveCat 如果回答对您有帮助，请接受/投票
名气不够，以后给你，非常感谢！

【解决方案2】：

将您的 json 转换为对象，然后将其传递给 props。 JSON 是一个字符串，其中没有定义map 函数。

Import data from ‘../data.json’
const PassTestData = () => {
 let _data = JSON.parse(data);  
  return (
    <div>
      < ComA date={_date} />
    </div>
  );};

并且在组件 A 中像这样传递 props 数据。

const ComA = props => {
  const data = props.data;
  return (
    ....
  );
};
export default ComA

【讨论】：

【解决方案3】：

你需要定义const data = props; like：

const { data } = props;

或

const data = props.data;

TypeError: data.map is not a function 被抛出是因为 props 是一个对象而不是一个数组。

Array.prototype.map 需要一个数组。

【讨论】：

@LoveCat 很高兴为您提供帮助！如果它解决了您的问题，请接受此答案。 Instructions here.