加载组件时检查道具是否未定义答案

【问题标题】：Check if props are undefined when loading component加载组件时检查道具是否未定义
【发布时间】：2021-04-21 08:16:08
【问题描述】：

我有一个关于检查功能组件中是否未定义道具以呈现一个屏幕或另一个屏幕的问题。

我的功能组件：

const InfoHeader = ({population, infected, recovered, deaths, active}) => {
console.log(population)
    return(
        <div className="infoHeader-wrapper">
            ///code to render the information passed into the props
        </div>
    )
}

export default InfoHeader

我知道第一次加载的道具是未定义的，因为它们只有在用户与我创建的地图上的一个部分交互时才会获得一个值。

我的问题是：

而不是做类似的事情

if(population !==undefined && infected !== undefined && ... )

有没有更好的方法来创建一个三元运算符来有条件地在功能组件的返回中呈现一个或另一个元素？比如：

return(
   allProps !== undefined ?? renderX : renderY
)

非常感谢

【问题讨论】：

标签： javascript reactjs conditional-operator conditional-rendering

【解决方案1】：

你可以创建一个函数来验证所有值不是undefined：

const InfoHeader = (props) => {
  const {population, infected, recovered, deaths, active} = props

  const propsValid = (props) => Object.values(props).every(prop => prop !== undefined)

  console.log(population)
  return(
    propsValid(props) ? renderX : renderY
  )
}

export default InfoHeader

【讨论】：

我认为这是更简洁的解决方案。快速的问题，而不是创建该函数，我不能简单地使用 Object.values(props).every(element => element !== undefined) 创建三元吗？ renderX : 渲染 Y 还是为了可读性我应该坚持这个功能？
如果你愿意，你绝对可以直接使用三元运算符。我提取到一个函数只是为了便于阅读，但你可以采用你想要的方法。
是的，我想就可读性而言，您的答案更有意义。非常感谢:)

【解决方案2】：

你可以这样做：

const bla = {
  population: null,
  infected: undefined,
  recovered: 1,
  deaths: true,
  active: 'yes'
}

const areAllTruthy = Object.values(bla).every(v => v !== null && v!== undefined)
console.log(areAllTruthy)

【讨论】：

那么将 props 传递给一个单独的对象并检查该对象中的所有项目是否都“存在”？
好吧，这确实是有道理的。谢谢
@JorgeGuerreiro 你不需要单独的对象，bla 可以是props。我刚刚发布了一个简单的 js sn-p 使其可运行。

【解决方案3】：

如果问题是可读性，你也可以这样：

 const scenario = population !==undefined && infected !== undefined && ...
 return(
    scenario ? renderX : renderY
 )

【讨论】：

【解决方案4】：

切换是一种可能性

switch (expr) {
  case "Oranges":
    console.log("Oranges are $0.59 a pound.");
    break;
  case "Apples":
    console.log("Apples are $0.32 a pound.");
    break;
  case "Bananas":
    console.log("Bananas are $0.48 a pound.");
    break;
  case "Cherries":
    console.log("Cherries are $3.00 a pound.");
    break;
  case "Mangoes":
  case "Papayas":
    console.log("Mangoes and papayas are $2.79 a pound.");
    break;
  default:
    console.log("Sorry, we are out of " + expr + ".");
}

console.log("Is there anything else you'd like?");

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/switch

在你的情况下，你可以这样使用它：

switch (population !==undefined && infected !== undefined) {
  case true:
    console.log('All is defined');
    break;
  case false:
    console.log('Not all is defined.');
    break;
  
  default:
    console.log('Default');
}

【讨论】：

我认为这对我没有帮助，但谢谢