ReactJS中如何使用二维数组map？获取嵌套数组的name属性

我来帮你捋清楚这个问题～从你的State结构来看，核心是要从选中的funcSelected项里提取coworks数组中的name，并把这些name存入coWorksArray。你之前卡住的地方大概率是没处理好funcSelected的结构，或者忽略了setState的异步特性，下面给你具体的实现方案：

先明确前提：funcSelected的结构 #

首先看你的State定义：funcSelected: []，这是一个空数组，所以我假设你会把从func数组中选中的一个或多个func对象存入这里。分两种情况处理：

情况1：funcSelected是单个func对象（单选场景） #

如果每次只选中一个func项，你可以在更新funcSelected的同时，直接提取对应的coworks name：

// 比如在选择func的事件处理函数里
handleSelectFunc = (selectedFunc) => {
  // 使用函数式setState，确保基于最新的state计算
  this.setState(prevState => {
    // 提取选中func的coworks中的name
    const coworksNames = selectedFunc.coworks.map(cowork => cowork.name);
    return {
      funcSelected: selectedFunc,
      coWorksArray: coworksNames
    };
  });
};

如果是先更新funcSelected，再单独更新coWorksArray，记得用setState的回调（因为setState是异步的）：

this.setState({ funcSelected: selectedFunc }, () => {
  const coworksNames = this.state.funcSelected.coworks.map(cowork => cowork.name);
  this.setState({ coWorksArray: coworksNames });
});

情况2：funcSelected是多个func对象的数组（多选场景） #

如果允许选中多个func项，需要遍历每个选中的func，提取它们的coworks name并合并成一个数组，这里用flatMap会很方便：

handleSelectFuncs = (selectedFuncs) => {
  this.setState(prevState => {
    // 遍历所有选中的func，提取每个的coworks name并合并
    const coworksNames = selectedFuncs.flatMap(funcItem => {
      // 加个判断避免coworks不存在时报错
      return funcItem.coworks ? funcItem.coworks.map(cowork => cowork.name) : [];
    });
    return {
      funcSelected: selectedFuncs,
      coWorksArray: coworksNames
    };
  });
};

你之前出错的可能原因 #

1. funcSelected是数组而非单个对象：如果直接写this.state.funcSelected.map(...)，但其实你需要先遍历funcSelected里的每个func，再遍历它们的coworks。
2. 拼写错误：你的State里是coWorksArray，但代码里写的是coWorks，这会导致state更新失败。
3. 忽略setState的异步性：如果在setState之后立刻访问this.state.funcSelected，可能拿到的还是旧值，所以要用函数式setState或者回调函数。

内容的提问来源于stack exchange，提问作者Jota