Реакция: Uncaught at TypeError: Невозможно прочитать свойство 'filter' из null в свойстве - PullRequest
Новая
       6

Реакция: Uncaught at TypeError: Невозможно прочитать свойство 'filter' из null в свойстве

0 голосов
/ 16 октября 2019

Я довольно новичок в React и должен отлаживать чужой код. Ошибка:

Реагирует: Uncaught at TypeError: Невозможно прочитать свойство 'filter' из null

Соответствующий фрагмент кода (в пределах 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;
}

Я уверен, что это легко, но я просто не знаю правильный синтаксис, пожалуйста, помогитеme.

Смежные вопросы

Ответы [ 2 ]

2 голосов
/ 16 октября 2019

Сначала проверьте, является ли 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' }}>
1 голос
/ 16 октября 2019

Вы передаете значение реквизита для реквизита другого компонента. Один из способов исправить это - проверить, что ваша опора не имеет нулевого значения, прежде чем монтировать класс MyTable . Это в свою очередь может быть достигнуто с помощью условного рендеринга .

с использованием оператора &&

Вы можете поместить это прямо в рендер method. 

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 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 был когда-либо нулевым или что-либо, кроме массива. Тогда я бы предложил перейти прямо к источнику, PropTypes . Это означало бы изменение класса, который отображает MyTable и имеет свойство prop summaryData 

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

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

IRenderMyTable. defaultProps = {
  summaryData: []

};

С этим новым кодом тот, кто рендерит IRenderMyTable , либо не пропустит никаких реквизитов, в этом случае summaryData будет пустым списком, но никогда не будет пустым. Или они передадут что-то типа Array. В обоих сценариях вы избегаете исключения из попытки выполнения .filter () для значения null .

Удивительная выгода от этого? Вам не нужно беспокоиться о постоянных , если вопросах, когда вы собираетесь использовать опору.

Мне нравится использовать defaultProps и propTypes чтобы удостовериться, кто бы ни использовал их, делает это правильно

...