Реагировать на карту над объектом массива

Question

, так что я довольно новичок в реагировании, я пытаюсь сгенерировать некоторые динамические вещи c, используя .map ()

, это мой компонент:

import React, { Component } from "react";

class DinamycStuff extends Component {
  state = {
    options: [
      { id: 1, optionOne: "OptionOne" },
      { id: 2, optionTwo: "OptionTwo" },
      { id: 3, optionThree: "OptionThree" }
    ]
  };
  render() {
    const options = [...this.state.options];

    return (
      <>
      {options.map((option) => {
        return {option}
      })}
        <span>{options.optionOne}</span>
        <span>{options.optionTwo}</span>
        <span>{options.optionThree}</span>
      </>
    );
  }
}

export default DinamycStuff;

Что я здесь не так делаю и почему карта не дает ожидаемого результата?

Answer 1

Вы должны сделать что-то вроде

render() {
    const { options } = this.state;

    return (
        <div className="option-wrapper">
            {options.length > 0 && options.map(option => {
                return <span key={option.id}>{option.option}</span>
            })}
        </div>
    );
}

Answer 2

Вам нужно отобразить и вернуть элемент HTML

return ({
  options.map((option) => {
    return `<span key={option.id}>${option. option}</span>`
  })
});

Answer 3

Вы сделали объект опций неправильно. Нам нужно иметь один и тот же атрибут для всех объектов в массиве.

class App extends React.Component {
  state = {
   options: [
  { id: 1, option: "OptionOne" },
  { id: 2, option: "OptionTwo" },
  { id: 3, option: "OptionThree" }
 ]
  };
  render() {
   const options = [...this.state.options];

  return (
    <>
      {options.map((option, index) => (
        <li key={index}>{option.option}</li>
       ))}
      </>
    );
 }
}

Другое дело, если вам нужно отобразить массив. Вам не нужно иметь много пролетов. Наличие одного достаточно. Функция map будет повторяться и давать вам все.

Answer 4

Карта, используемая здесь, фактически предназначена для преобразования объекта js в реагирующий элемент, но здесь вы по-прежнему используете объект js после преобразования карты. Элементом реакции может быть <p key = {option.id}> {option. optionOne} </p>. Если после возврата на карте есть элемент реагирования, это правильно.

{options.map((option) => {
  return <p key = {option.id}> {option. optionOne} </p>
})}

или

{options.map((option) =>  <p key = {option.id}> {option. optionOne} </p>)}

Answer 5

Это нормально?

import React, { Component } from "react";
class DinamycStuff extends Component {
  state = {
    options: [
      { id: 1, value: "OptionOne" },
      { id: 2, value: "OptionTwo" },
      { id: 3, value: "OptionThree" }
    ]
  };
  render() {
    const options = [...this.state.options];

    return (
      <>
      {options.map((option) => {
        return <span>{option.value}</span>
      })}
      </>
    );
  }
}
export default DinamycStuff;