Question

我对React还是很陌生，应该调试其他人的代码。错误是

反应：遇到TypeError错误：无法读取null的属性'filter'

发生错误的相应代码段（在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）并不重要。

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

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

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

相关问题

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 类之前检查您的道具是否为空值。这可以通过conditional rendering来实现。

使用&&运算符

您可以直接将其放入渲染方法中。

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' }}>

具有变量和条件，

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

然后，无论您在哪里渲染<MyTable.../>，都用它代替变量conditionalMyTable。

由于Ant设计，将变量用于dataSource属性的值本身

选项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或任何非Array的东西。然后，我建议直接进入源PropTypes。这意味着修改正在呈现 MyTable 且具有道具 summaryData

的类。

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

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

IRenderMyTable. defaultProps = {
  summaryData: []

};

使用此新代码，呈现 IRenderMyTable 的任何人都不会传递任何道具，在这种情况下， summaryData 将是一个空列表，但永远不会为null。否则他们将传递Array类型的东西。在这两种情况下，都可以避免尝试对 null 值执行 .filter（）的例外。

这有什么好处？每当您要使用道具时，您都不必担心不断出现 if 问题。

我喜欢使用 defaultProps 和 propTypes 来确保使用它们的人都能正确执行。

反应：陷入TypeError：无法读取属性中null的属性“ filter”

相关问题

2 个答案: