呈现页面时出现此错误

Question

我不明白这个错误。这是语法错误吗？发生这种情况是因为 react-dom 版本吗？

在此块上抛出错误。

getWitnessName = (witnessId) => {
    if (this.props.witnesses) {
        return this.props.witnesses.find(el => el.account_id === witnessId).account_name;
    }
}

错误是：

Uncaught TypeError: Cannot read property 'account_name' of undefined
at BlockList.__getWitnessName__REACT_HOT_LOADER__ (BlockList.js:212)
at BlockList._this.getWitnessName (BlockList.js:76)
at eval (BlockList.js:321)
at Array.map (<anonymous>)
at BlockList.render (BlockList.js:314)
at finishClassComponent (react-dom.development.js:17160)
at updateClassComponent (react-dom.development.js:17110)
at beginWork (react-dom.development.js:18620)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)

The above error occurred in the <BlockList> component:
in BlockList (created by Connect(BlockList))
in Connect(BlockList) (created by Route)
in Route
in Switch
in div
in Router (created by ConnectedRouter)
in ConnectedRouter
in Provider
in AppContainer

Answer 1

getWitnessName = (witnessId) => {
    if (this.props.witnesses) {
        let foundWitnesses = this.props.witnesses.find(el => el.account_id === witnessId);
        if(foundWitnesses)
             return foundWitnesses.account_name;
        else 
             return 'Not found';
    }
}

Answer 2

尝试首先验证以获取属性，这是因为它没有找到任何验证输入。然后找到returnsundefined，从undefined.

中获取不到属性

例如

this.props.witnesses.find(el => el.account_id === witnessId)?.account_name ?? 'Account Not Found';

Answer 3

您可以使用Optional chaining

添加一个 nullish coalescing operator 来完成图片而不是正常的 ||，它不会对虚假值做出反应

return this.props.witnesses.find(el => el.account_id === witnessId)?.account_name ?? "N/A";

它将处理丢失的证人和丢失的 account_name

例子

const props = {
  witnesses: [
  { account_id: 1, account_name: "Fred"}, 
  { account_id: 2, account_name: "Joe" }, 
  { account_id: 3 }]
};

const getName = witnessId => props.witnesses
   .find(el => el.account_id === witnessId)?.account_name ?? "N/A";

console.log(getName(1))
console.log(getName(2))
console.log(getName(3))
console.log(getName(4))

Answer 4

如果您看到以下代码，如果未找到任何 account_id 与给定的 witnessId 匹配，则 witness var 可以是未定义的。在那种情况下，将抛出错误，所以这样做

getWitnessName = (witnessId) => {
    if (this.props.witnesses) {
        const witness = this.props.witnesses.find(el => el.account_id === witnessId)
        return witness ? witness.account_name : `No witness for given id: ${witnessId}`;
    }
}

呈现页面时出现此错误

Getting this error while rendering the page

javascript

node.js

reactjs

react-dom