Me gustaría mapear una matriz más dimensional que se vea así:

const array = [
  {
      name: "Anna",
      items: ["Bread", "Cake", "Wine"]
  },
  {
      name: "John",
      items: ["Cucumber", "Pizza", "Jam"]
  }
]

He probado esto:

class Example extends Component {
    render() {
        return (
            <View>
                {
                array.map((data) => { 
                  return(
                  <Text>{data.name}</Text>
                    {
                     data.items.map((item) => {
                        return (
                            <Text>{item}</Text>
                        );
                    }
                  );
                  }
                }
            </View>
        );
    }
}

También he tratado de poner esto en una función que estoy renderizando, pero ninguno de los dos me funciona. ¿Me pueden ayudar?

2
Paul K 17 sep. 2018 a las 13:04

3 respuestas

La mejor respuesta

Quizás este te pueda ayudar. También debe usar la tecla; de lo contrario, recibirá una advertencia durante el renderizado.

class Example extends Component {
      _renderYYY(item) {
        console.log(item);
        return item.map((data) => {
          return (
            <View>
              <Text>{data}</Text>
            </View>
          );
        });
      }
      _renderXXX(array) {
        return array.map((data) => {
          return (
            <View>
              <Text key={data.name}>{data.name}</Text>
              {
                this._renderYYY(data.items)
              }
            </View>
          );
        });
      }
      render() {
        return (
          <View>
            {
              this._renderXXX(array)
            }
          </View>
        );
      }
    }
0
Berkay Kaan 17 sep. 2018 a las 10:20

Aquí esto podría ayudar.

class Example extends Component {
  renderData = (array) => (
    array.map((data, index) => ([
      <Text key={index}>{data.name}</Text>,
      this.renderItems(data.items)
    ])
  ))

  renderItems = (items) => (
    items.map((item, index) => (
      <Text key={`${item}${index}`}>{item}</Text>
    )
  ))

  render() {
    return (
        <View>
          {this.renderData(array)}
        </View>
    );
  }
}
0
Varun Arya 13 nov. 2018 a las 08:38

Una limitación de JSX es que un objeto JSX siempre debe tener una única raíz.

Es decir,

return (
  <Text>One</Text>
  <Text>Two</Text>
);

No es válida

Debe ajustar el valor de retorno del mapa externo (incluido el <Text> externo y el resultado interno de .map()) con un elemento raíz (probablemente <View>).

Además , siempre debe usar la key={} utilería, y le otorgan un valor global único al representar una matriz en JSX.


En general, tendría algo como esto:

class Example extends Component {
  render() {
    return (
      <View>
        {
          array.map((data) => (
            <View key={data.name}>
              <Text>{data.name}</Text>
              {
                data.items.map((item) => (
                  <Text key={data.name + item}>{item}</Text>
                ))
              }
            </View>
          ))
        }
      </View>
    );
  }
}

Supongo que no puede haber nombres duplicados y que no puede haber elementos duplicados dentro de un solo objeto con nombre.

0
Madara's Ghost 17 sep. 2018 a las 10:19