Question

我想映射一个更大尺寸的数组，如下所示：

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

我已经尝试过：

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

我也试图将其放入我正在渲染的函数中，但都对我不起作用你能帮忙吗？

Answer 1

JSX的局限性在于，JSX对象必须始终只有一个根。

即

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

无效。

您应该使用根元素（可能是<Text>）包装外部映射的返回值（包括外部.map()和内部<View>）。

另外，在将数组渲染到JSX中时，应始终使用key={}道具，和为其提供全局唯一的值。

总而言之，我会有这样的东西：

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>
    );
  }
}

我假设名称不能重复，并且单个命名对象内不能有重复项。

Answer 2

也许这可以帮助您。另外，您应该使用密钥，否则在渲染期间会发出警告。

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>
        );
      }
    }

Answer 3

这可能会有所帮助。

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>
    );
  }
}

React Native渲染多维数组

3 个答案: