Javascript 反应本机渲染更高维数组

我想映射一个更高维度的数组，如下所示：

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

类示例扩展组件{
render（）{
返回(
{
array.map（（数据）=>{
返回(
{data.name}
{
data.items.map（（item）=>{
返回(
{item}
);
}
);
}
}
);
}
}

我也试着把它放到一个我正在渲染的函数中，但这两个函数都不适合我

---

您能帮忙吗？

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

就是

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

---

我假设不存在重复的名称，并且单个命名对象内部不存在重复的项。

也许这一项可以帮助您。此外，您应该使用key，否则在渲染过程中会出现警告

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

类示例扩展组件{
_Renderyy（项目）{
控制台日志（项目）；
返回项.map（（数据）=>{
返回(
{data}
);
});
}
_renderXXX（阵列）{
返回数组.map（（数据）=>{
返回(
{data.name}
{
此._renderyy（data.items）
}
);
});
}
render（）{
返回(
{
此._renderXXX（数组）
}
);
}
}

这可能会有所帮助

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

类示例扩展组件{
renderData=（数组）=>(
array.map（（数据，索引）=>([
{data.name}，
this.renderItems（data.items）
])
))
renderItems=（项目）=>(
items.map（（项目，索引）=>(
{item}
)
))
render（）{
返回(
{this.renderData（数组）}
);
}
}

您只能返回单个元素。是否尝试将

..

封装在

中？使用.map时，请始终使用索引作为第二个参数。尝试使用-array.map（（数据，索引）=>{return（{data.name}{data.items.map(（项，索引）=>{return（{item}）；}）；}在循环中呈现jsx元素时，也不要忘记添加键。为数据中的每个对象保留唯一的id，并将其添加为key@ArifRathod如果他们在回调中不使用索引，为什么他们总是指定

index

？@ArifRathod index如何解决问题？这里的索引不重要您确定不必返回s吗两种映射方法中都有什么内容？@PaulK我省略了花括号，这个较短形式的箭头函数是

（params）=>表达式

，而

表达式

是从函数隐式返回的，就好像我编写了

（params）=>{return expression；}

，因为JSX元素是有效的表达式（它直接转换为单个

React.createElement（）

调用），这是允许的。

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