过滤 react table 数据中的格式化数据

Question

我想访问自定义过滤器中的格式化数据和 "untouched" 数据，但我没有成功：

accessor: row => {
    row.ageFormatted = row.age + " yrs";
    return row.age;
},
Cell: row => (
    <div style={{ textAlign: "center" }}>
        {row.original.ageFormatted}
    </div>
),
filterMethod: (filter, row) => {
    return (
        row.age + "" === filter.value ||
        row.ageFormatted.contains(filter.value)
    );
}

来自我在沙箱中的代码示例：https://codesandbox.io/s/react-table-custom-filtering-j90oh (a fork of the official react-table example for custom filtering)。用户应该能够过滤数字或字符串，如“3 y”。

我怎样才能做到这一点？

Answer 1

row 似乎不保留添加的数据。因此，与其依赖副作用，不如使用辅助函数从 filterMethod().

中的 row.age 生成 row.ageFormatted

通常最好存储较少的冗余数据，而是从您真正需要存储的数据中生成派生值。数据中的冗余越少意味着您需要同步的次数就越少。特别是如果两个字段之间的差异与给定示例中一样微不足道。

Answer 2

您可以在 componentDidMount 上将所有格式化值计算到对象中，将其保存到状态中，然后使用它而不是每次使用过滤器时都计算它。在这里查看我的工作解决方案：https://codesandbox.io/s/react-table-custom-filtering-84lxw

另外，你的row.ageFormatted.contains(filter.value)比较是错误的。检查字符串是否包含子字符串的正确方法是 .includes：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes

过滤 react table 数据中的格式化数据

Filter formatted data in react table data

reactjs

react-table