如果值是唯一的，则更新表

Question

我在reactjs中有一个查询。

问题是，我想根据更新的数据在屏幕上呈现一个表。我使用getapi来调用数据，但我需要做的是呈现与唯一id相对应的最新数据。否则，显示所有数据。

Answer 1

让您收到有重复记录的道具，如

data = [{
id: 1,
x: 40,
y: 30,
x: 20,
e: 230
},{
id: 2,
x: 42,
y: 32,
x: 22,
e: 232
},{
id: 3,
x: 41,
y: 31,
x: 21,
e: 231
},
{
id: 1,
x: 4,
y: 3,
x: 2,
e: 23
}];

要求：根据此数据，您希望为最新值id为1,2和3的唯一id进行渲染。

import React from "react";
import "./style.css";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { data: this.getUniqueAndUpdatedRecords(props) }
console.log(this.state.data);
}
getUniqueAndUpdatedRecords(data) {
return data.data.filter(function ({ id }) {
return !this.has(id) && this.add(id);
}, new Set());
}
render() {
return <table>
<thead>
<tr>
<th>x</th>
<th>y</th>
<th>z</th>
<th>e</th>
</tr>
</thead>
<tbody>
{(this.state.data && this.state.data.length ? (this.state.data.map(({ id, x, y, z, e }) => {
return <tr key={id}>
<td>{x}</td>
<td>{y}</td>
<td>{z}</td>
<td>{e}</td>
</tr>
})) : "")}
</tbody>
</table>
}
}

注意：根据这段代码，您的id＝1是数据的第一个索引，它将被呈现。如果你想要id＝1，第四个索引将是最新的，那么反转你的数据数组

data = data.reverse();

添加此示例作为参考：https://stackblitz.com/edit/react-jditah?file=src/index.js

Answer 2

<tbody>
{this.props.data && this.props.data.length ?
(this.props.data.map((item,i,arr) => {
return (
// item.a === this.props.data.a ?
<TableValue
x={item['x']}
y={item['y']}
z={item['z']}
e={item['e']}
/>
// :""

所以这就是数据添加到表中的地方。。。。现在我需要，假设我们有4个字段--->2个id相同，2个id不同，所以我只需要渲染3个字段。对于相同的id，更新后的id应该呈现