检查功能反应 redux 组件中从 mapStateToProps 传递的道具的真实性

Question

我有 3 个组件，TypeList、ConnectedType (=connect(mapStateToProps)(Type) 和 Type。 Type 将从 TypeList (onClick, name) 接收 props，将 props 传递给 ConnectedType 以及 ConnectedType 的 mapStateToProps (onMiniPokemonClick, miniPokemon)。在映射之前如何检查 miniPokemon 是否存在？是否可以在功能组件上执行逻辑，或者我是否必须将其设为 class 并在其中创建辅助函数？

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>
)

Answer 1

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

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

或者，如果您只需要在 null/undefined 值出现时确保 miniPokemon 是一个数组 - 您可以提供默认参数：

({onClick, name, onMiniPokemonClick, miniPokemon = []})

检查功能反应 redux 组件中从 mapStateToProps 传递的道具的真实性

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

javascript

reactjs

redux

react-redux