Как использовать функцию карты ES6 в компоненте React без сохранения состояния

Question

В моем приложении React у меня есть массив объектов, которые я получаю через API-ответ.Я хочу отобразить каждую деталь объекта в гармошке.Я использую доступный по реакции аккордеон и создал React Stateless Component.Я хочу, чтобы каждый мой аккордеон представлял один объект массива.У меня есть массив объектов в dataProp, и для перебора я написал свой компонент, как показано ниже:

1002 * 1003дайте мне знать, где я иду не так?Заранее спасибо.

Answer 1

Я думаю, что вам не хватает 2 вещей - во-первых, у вашего getMappedData метода нет закрывающей фигурной скобки.Во-вторых, условие if должно возвращать значение:

getMappedData = (dataProp) =>{
      if (dataProp) { 
        return dataProp.map(item =>{
            return item;
        })
      }
      else {
       return "";
      }
}

также, вызов метода должен быть this.getMappedData, а не this.props.getMappedData, потому что метод определен в классе и НЕ поступает из реквизита

другая проблема в том, что вы не можете просто вернуть массив из метода getMappedData, вам нужно вернуть jsx, поэтому, вероятно, он должен выглядеть примерно так:

getMappedData = (dataProp) =>{
      if (dataProp) { 
        return dataProp.map(item =>{
            return <div>{item}</div>;
        })
      }
      else {
       return "";
      }
}

при условии item - это строка или число.Если это объект или массив, он не будет работать.

также ваш метод рендеринга может просто использовать {this.getMappedData()}, в нем нет необходимости в подпорке, ваш метод getMappedData может использовать подпорку:

getMappedData() {
      const { dataProp } = this.props;
      if (dataProp) { 
        return dataProp.map(item =>{
            return <div>{item}</div>;
        })
      }
      else {
       return "";
      }
}

Answer 2

Чтобы ответить на ваш первоначальный вопрос: массив dataProp можно просто отобразить следующим образом:

  render(){
      const { dataProp } = this.props;

      return <Accordion>
            {
              dataProp && dataProp.map(item =>
              <AccordionItem>
                <AccordionItemTitle>
                  <h3>
                    Details: {item.title}
                  </h3>
                </AccordionItemTitle>
                <AccordionItemBody>
                  {item.body}
                </AccordionItemBody>
              </AccordionItem>
            )}
          </Accordion>
        }

Answer 3

Обновите ваш звонок this.props.getMappedData(item[name]) на this.getMappedData(item[name])

Причина, по которой он не может обнаружить, что реквизиты обычно используются для передачи данных от родителя к ребенку.Этот пост в блоге отлично объясняет это.https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17