检查函数react redux组件中从mapStateToProps传递的props的真实性

Check truthiness of props passed from mapStateToProps in functional react redux component

本文关键字：props 真实性 mapStateToProps react 函数 redux 组件 检查      更新时间：2023-09-26

我有三个组件，TypeList、ConnectedType(=connect(mapStateToProps)(Type(和Type。Type将从TypeList(onClick, name(和ConnectedType的mapStateToProps(onMiniPokemonClick, miniPokemon(接收道具，TypeList将道具传递给ConnectedType。在映射miniPokemon之前，我如何检查它是否存在？有可能在功能组件上进行逻辑运算吗？或者我必须把它变成一个类并在里面创建一个辅助函数吗？

const Type = ({onClick, name, onMiniPokemonClick, miniPokemon}) => (
  <li
    onClick={onClick}
  >
    {name}
    <ul>
      {
        if (miniPokemon) {
          miniPokemon.map(function (pokemon, idx) {
            return (<MiniPokemon onClick={() => onMiniPokemonClick(pokemon.name)} name={pokemon.name}/>)
          })
        }
      }
    </ul>
  </li>
)

您所需要做的就是使用括号来允许多行函数体

const Type = ({onClick, name, onMiniPokemonClick, miniPokemon}) => {
   // some logic   
   return (
      <li
        onClick={onClick}
      >...
      </li>
   )
}

或者，如果您只需要确保当出现空/未定义值时miniPokemon是一个数组，您可以提供一个默认参数：

({onClick, name, onMiniPokemonClick, miniPokemon = []})
相关文章：