React Native 渲染多维数组答案

【问题标题】：React native render more dimensional arrayReact Native 渲染多维数组
【发布时间】：2019-02-21 05:32:58
【问题描述】：

我想映射一个多维数组，如下所示：

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

我也尝试将它放入我正在渲染的函数中，但两者都不适合我你能帮忙吗？

【问题讨论】：

你只能返回一个元素。您是否尝试过将<Text>... 包含在<View> 中？
当您使用 .map 时，请始终使用 index 作为第二个参数。尝试使用这个 - array.map((data,index) => { return( {data.name} { data.items.map((item,index) => { return ( {item} ); } ); }
在循环渲染 jsx 元素时也不要忘记添加键。为数据中的每个对象保留唯一 ID，并将其添加为键
@ArifRathod 如果他们没有在回调中使用index，为什么要始终指定它？
@ArifRathod 索引如何解决问题？索引在这里无关紧要

标签： javascript reactjs react-native array.prototype.map

【解决方案1】：

也许这个可以帮助你。此外，您应该使用密钥，否则在渲染过程中会收到警告。

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

【讨论】：

【解决方案2】：

JSX 的一个限制是 JSX 对象必须始终只有一个根。

也就是说，

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

无效。

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

另外，您应该始终使用 key={} 属性，并且在将数组渲染到 JSX 时为其指定一个全局唯一值。

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

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

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

【讨论】：

你确定你不需要在这两种地图方法中返回一些东西吗？
@PaulK 我已经省略了大括号，这个较短的箭头函数形式是(params) => expression，而expression 是从函数中隐式返回的，就好像我已经写了(params) => { return expression; }。由于 JSX 元素是有效的表达式（它直接转换为单个 React.createElement() 调用），因此是允许的。

【解决方案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>
    );
  }
}

【讨论】：