反应：未捕获 TypeError：无法读取属性中的 null 属性“过滤器”

Question

我对 React 比较陌生，我应该调试别人的代码。错误是

React：在 TypeError 中未捕获：无法读取 null 的属性“过滤器”

发生错误的对应代码sn-p（render()内）为

 <MyTable size="small"
    dataSource={this.props.summaryData.filter(record => record.DifferenceValue !== 0 && 
                record.Value >= record.AdjustedValue) }
    rowKey={(record) => (record.Id).toString()} 
    pagination={false}
    locale={{ emptyText: 'No applicable summary data found' }}>

我想，Table 来自 Antd 和 class MyTable extends Table<Interfaces.ViewEntry> { } 并不重要，这本质上是一个 Antd Table。

我知道我应该在属性dataSource 中捕获this.props.summaryData.filter() 或summaryData 的可能null 值。我想要一个类似以下伪代码的解决方法，但我不确定正确的语法：

dataSource = {
  var out = this.props.summaryData.filter(record => record.DifferenceValue !== 0 &&
                                         record.ErdrValue >= record.AdjustedValue)
  if out = null return null else return out;
}

我确信这很容易，但我只是不知道正确的语法，请帮助我。

相关问题

• React.JS: TypeError: Cannot read property 'filter' of undefined at findLoader
• TypeError: Cannot read property 'filter' of undefined in react

Answer 1

首先，检查summaryData是否为空 -

let dataSource = this.props.summaryData ? 
         this.props.summaryData.filter(record => record.DifferenceValue !== 0 && record.Value >= record.AdjustedValue):[]

现在dataSource 要么是空的[]，要么是你的filter 函数返回的数组。 那么

<MyTable size="small"
    dataSource={dataSource}
    rowKey={(record) => (record.Id).toString()} 
    pagination={false}
    locale={{ emptyText: 'No applicable summary data found' }}>

Answer 2

你正在将一个 prop 值传递给另一个组件的 prop。解决此问题的一种方法是在安装 MyTable 类之前检查您的 prop 是否为空值。这反过来又可以通过conditional rendering 来实现。

使用 && 运算符

您可以将其直接放入您的 render 方法中。

this.props.summaryData &&
<MyTable size="small"
dataSource={this.props.summaryData.filter(record => record.DifferenceValue !== 0 && 
            record.Value >= record.AdjustedValue) }
rowKey={(record) => (record.Id).toString()} 
pagination={false}
locale={{ emptyText: 'No applicable summary data found' }}>

带变量和if条件

let conditionalMyTable = this.props.summaryData
            ? <MyTable ... />
            : null;

然后，无论您在哪里渲染 <MyTable.../>，都将其替换为变量 conditionalMyTable。

由于 Ant 设计，dataSource prop 的值本身使用变量

选项 1，将查询放在里面

<MyTable size="small"
    dataSource={this.props.summaryData 
                ? this.props.summaryData.filter(record => 
                           record.DifferenceValue !== 0 && 
                           record.Value >= record.AdjustedValue)
                : null
               }
    rowKey={(record) => (record.Id).toString()} 
    pagination={false}
    locale={{ emptyText: 'No applicable summary data found' }}> 

选项2，使用外部变量

let summaryData = this.props.summaryData || [];
<MyTable size="small"
dataSource={summaryData.filter(record => record.DifferenceValue !== 0 && 
            record.Value >= record.AdjustedValue) }
rowKey={(record) => (record.Id).toString()} 
pagination={false}
locale={{ emptyText: 'No applicable summary data found' }}>

另一种选择

也许错误不在这里，这只是一个症状。也许你永远不希望 this.props.summaryData 为 null 或任何不是数组的东西。然后我建议直接访问源代码PropTypes。这意味着修改呈现 MyTable 的类，并具有 summaryData

属性

class IRenderMyTable extends React.Component {
 ....
}

IRenderMyTable.propTypes = {
  summaryData: PropTypes.array.isRequired
};

IRenderMyTable. defaultProps = {
  summaryData: []

};

使用这个新代码，渲染 IRenderMyTable 的人要么不会传递任何道具，在这种情况下，summaryData 将是一个空列表，但永远不会为空。或者他们会传递数组类型的东西。在这两种情况下，您都可以避免尝试对 null 值执行 .filter() 的异常。

这样做有什么好处？每当您要使用该道具时，您不必担心不断地提出 if 问题。

我喜欢使用 defaultProps 和 propTypes 来确保无论谁使用它们，都做对了。