Как передать json значений между компонентом React - PullRequest
Новая
       1

Как передать json значений между компонентом React

1 голос
/ 14 января 2020

У меня есть вопрос о передаче данных json между ними, у меня есть компоненты PassTestData / ComA / ComB, данные импортированы в PassTestData и хотят передать в ComA. Тем не менее, появляется сообщение об ошибке «Ошибка типа: data.map не является функцией». Ниже приведены мои коды.

PassTestData 

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 ;

данные. 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"
    },
   ]

Спасибо!

Ответы [ 3 ]

1 голос
/ 14 января 2020

Определить как 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>
  );
};
0 голосов
/ 14 января 2020

Вам необходимо определить const data = props; как: 

const { data } = props;

ИЛИ 

const data = props.data;

TypeError: data.map is not a function выбрасывается из-за того, что props является объектом, а не массивом.

Array.prototype.map ожидает массив.

0 голосов
/ 14 января 2020

Преобразовать вас json в объект, а затем передать его в реквизит. JSON является строкой, и функция map в ней не определена. 

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

И в компоненте А передайте данные реквизита следующим образом. 

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