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

Question

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

这就是它在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; }
}

Answer 1

这里没有什么特定的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演示