时间戳

首页 > 解决方案 > React 从单个数组创建 2D 数组

reactjs - React 从单个数组创建 2D 数组

问题描述

我正在努力适应 React。我有两个数组。一个数组中的每一项都必须与另一个数组中的每一项相匹配。由此，我需要一个二维数组。

这就是它在 C# 中的样子：

 static void Main(string[] args)
        { 
            var listA = new List<int>
            {
                11,12,13,14
            };
            var listB = new List<int>
            {
                21,22
            };
            var c = new List<Merged>();

            foreach(var i in listA)
            {
                foreach(var j in listB)
                {
                    Merged m = new Merged();
                    m.datasetId = i;
                    m.attributeId = j;
                    c.Add(m);
                }
            }
            foreach(var m in c)
            {
                Console.WriteLine(m.datasetId + ", " + m.attributeId);
            }

            //OUTPUT
            //11, 21
            //11, 22
            //12, 21
            //12, 22
            //13, 21
            //13, 22
            //14, 21
            //14, 22

            Console.ReadLine();
        }

    }

    public class Merged
    {
        public int datasetId { get; set; }
        public int attributeId { get; set; }
    }

标签： reactjsreact-nativereact-reduxrxjs

解决方案

这里没有什么特定于 React 的，它实际上只是一个 Javascript 问题。您可以使用与 C# 代码相同的逻辑：

const listA = [11, 12, 13, 14];
const listB = [21, 22];
let merged = [];

for (let i of listA) {
  for (let j of listB) {
    merged.push([i, j]);
  }
}

console.log(merged); // logs actual object
console.log(merged.map(pair => pair.join(", "))); // logs strings

编辑：

根据您的评论，这是在 React 类组件中执行此操作的一种方法。但是，您可以通过多种不同的方式进行设置，并且根据您的数据流，将其放入道具listA而不是状态可能会更好。此外，带有钩子的函数组件现在非常普遍，并且在许多情况下比类组件更简单。listB

export default class App extends React.Component {
  state = { listA: [11, 12, 13, 14], listB: [21, 22], merged: [] };

  mergeLists = () => {
    let newMerged = [];
    for (let i of this.state.listA) {
      for (let j of this.state.listB) {
        newMerged.push([i, j]);
      }
    }
    return newMerged.map(p => p.join(", "));
  };

  componentDidMount() {
    this.setState({merged: this.mergeLists()});
  }

  componentDidUpdate(prevProps, prevState) {
    if (
        this.state.listA !== prevState.listA || 
        this.state.listB !== prevState.listB
    ) {
      this.setState({merged: this.mergeLists()})
    }
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.merged.map((pair, idx) => (
            <li key={idx}>{pair}</li>
          ))}
        </ul>
      </div>
    );
  }
}

CodeSandbox 演示

推荐阅读