Когда я передаю массив в реагирующий функциональный компонент, он превращается в объект - PullRequest
Новая
       3

Когда я передаю массив в реагирующий функциональный компонент, он превращается в объект

0 голосов
/ 22 марта 2019

Привет, я должен передать массив в качестве реквизита для функционального компонента. 

import React from "react";
import { render } from "react-dom";

const App = () => {
  const FBS = ({ figures }) => {
    console.log(typeof figures);
    return figures.map((item, key) => <p key={key}>{item.description}</p>);
  };
  const figures = [
    {
      config: 112,
      description: "description text 1"
    },
    {
      config: 787,
      description: "description text 2"
    }
  ];

  return (
    <div>
      {/* <FBS {...figures} /> */}
      <FBS figures={figures} />
    </div>
  );
};

render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<body>
<div id='root' />
</body>

Но он преобразуется в объект в дочернем компоненте. Пожалуйста, посмотрите на функцию рендеринга. Когда я передаю массив как {... figure}, я не получаю его как Array в компоненте FBS, из-за чего я не могу запустить функцию map для него. Принимая во внимание, что когда я передаю его как figure = {figure}, я получаю массив. Я хочу передать это как {... цифры}.

Пожалуйста, помогите

Пожалуйста, посмотрите на мой код для лучшего понимания. здесь

Ответы [ 2 ]

1 голос
/ 22 марта 2019

У вас должен быть дополнительный объект, который будет иметь пару ключей и значений, которые будут деструктурированы как ваш props в компонент React. 

const props = {
  figures, // shorter way of writing figures: figures
  // Any other objects you'd like to pass on as props
}

, а затем вы можете сделать: 

<FPS {...props} />

Обновленный код

По сути, вы можете только деструктировать объект в компоненте React, потому что тогда пары ключ-значение для деструктурированного объекта станут props к компоненту.

Для лучшего понимания, 

const arr = [{ a: 'a'}]
{...arr}

даст: 

{
  0: {a: 'a'}
}

, потому что 0 является ключом, поскольку это массив, а нек объекту, поэтому вы действительно передавали реквизит с именем 0 вместо figures, а figures равнялся undefined и, следовательно, ошибка.

0 голосов
/ 22 марта 2019

Вы можете использовать что-то вроде этого: 

import React from "react";
import Figure from './Figure';
import { render } from "react-dom";

const App = () => {
  const figures = [
    {
      config: 112,
      description: "description text 1"
    },
    {
      config: 787,
      description: "description text 2"
    }
  ];

  return (
    <div>

      { 
        figures.map((figure, key) => {
          return <Figure key={key} {...figure}/>
        })
      }

    </div>
  );
};

render(<App />, document.getElementById("root"));

И создайте компонент с именем Figure, например: 

import React from "react";

const Figure = (props) => {
   return (
    <div>
     <p>{props.description}</p>
     <p>{props.config}</p>
    </div>
  );
};

export default Figure;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...