必需的道具和存在检查

Question

我发现即使需要 prop list，我的代码也会出错。
那么，我是否应该像下面那样在映射之前检查列表是否存在？

class Cart extends React.Component {
  render() {
    const { list } = this.props
    return { list && list.map(e => <div> {e} </div>) }
  }
}

Cart.propTypes = {
  list: PropTypes.array.isRequired
}

更新：

我看到建议添加默认值的建议。

同时设置 isRequired 和默认值有意义吗？
这不是暗示如果需要一个值，那么它应该始终存在吗？

但是组件似乎挂载了，即使一些必需的道具不满足。

所以我想设置默认值是有道理的，但是 isRequire 只是开发人员的标志，仅此而已，对吗？

Answer 1

是的，我认为你应该。其他开发人员仍然可以显式地将 null 传递给 list 属性。

<Cart list={null}/>

或者……更真实的例子：

// getListFromServer() <-- can return null
<Cart list={getListFromServer()}/>

Answer 2

是的，你应该检查它是否有一个数组，因为你的购物车组件总是希望列表作为一个数组，并且列表不应该是空数组，然后才做映射或者在传递列表道具之前检查父组件本身到购物车这样你就不需要在购物车组件中再次检查你可以直接做 map

    class Cart extends React.Component {

         render() {
            const { list } = this.props; //should be inside render
             return (list && list.length>0 && list.map(e => <div> {e} </div>) 
          }
      }

最好在父组件中将列表保留为空数组，例如：this.state={list:[]} 这样您就无需检查它是未定义的还是空的。您可以只检查数组的长度并执行 map

Answer 3

您应该使用从 prop-types 导入的 PropTypes：

import PropTypes from 'prop-types'

Cart.propTypes = {
  list: PropTypes.array.isRequired
}

So, should I check for the existence of list before mapping it as I'm doing below?

return { list && list.map(e => {e} ) }

是的，你应该检查一下。因为在呈现您的组件之前，列表可能未定义或为空。在 undefined 或 null 上使用 map 会引发错误。当您的组件获取列表数据时，您对地图的使用将是正确的用法。

最好检查一下它的长度:

return { list && list.length && list.map(e => <div> {e} </div>) }

我还建议您使用 defaultProps:

Cart.defaultProps = {
  list: [] // or list: ['my','default','props']
}

如果你使用默认的props，那么你在使用地图之前就不需要担心检查它了。这将确保您映射到数组。

但是如果用户传递数组以外的属性怎么办？

即使在这种情况下，也会通过 PropTypes.array.isRequired 通知用户。所以在这种情况下使用地图之前检查 list 是没有必要的。

Answer 4

我认为这取决于你的编程方式，这是非常主观的。

有些人更愿意让调用者负责提供正确的值，有些人更愿意更具防御性并检查所有可能的值。

我更喜欢让调用者提供正确的值，否则，为什么一开始就有propTypes，它几乎变得毫无用处。

现在，如果您无法控制组件的调用方式，请检查是否传递了正确的值。

我会在做一些副作用时做 null 检查，比如做一个我无法真正控制结果的 Ajax 调用。

最后，你需要在你的程序中做 types/value 检查，问题是你在哪里做，在任何地方或重要的地方。

Answer 5

你能 post 将列表传递给 cart 组件的代码吗？

如果没有任何效果，您可以随时尝试这个

Cart.defaultProps = {
     list: []
}

虽然我建议解决代码崩溃的根本问题，但您能否也提供错误日志。

必需的道具和存在检查

Required Props and existence checks

javascript

reactjs

react-proptypes