Question

即使需要prop列表，我仍然看到代码破裂。
因此，在进行下面的映射之前，应该在映射列表之前检查列表是否存在吗？

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

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

import PropTypes from 'prop-types'

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

那么，在进行列表映射之前，我应该先检查列表是否存在？

返回{list && list.map（e => {e}）}

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

检查其长度甚至会更好：

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

我还建议您使用defaultProps：

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

如果使用默认道具，则在使用地图之前无需担心对其进行检查。这样可以确保您映射到数组。

但是，如果用户通过数组以外的道具怎么办？

即使在这种情况下，也会通过PropTypes.array.isRequired通知用户。因此，在这种情况下，使用地图之前无需检查list。

Answer 3

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

有些人更愿意对呼叫者负责以提供正确的值，有些人则更倾向于防御并检查所有可能的值。

我更愿意让调用者提供正确的值，否则，为什么首先使用propTypes，它几乎变得无用。

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

在做一些副作用时，我会做null检查，例如在无法真正控制结果的地方进行Ajax调用。

最后，您需要在程序中进行类型/值检查，问题是您在哪里，到处或在哪里进行操作。

Answer 4

是的，您应该检查它是否具有数组，因为您的Cart组件始终希望将list视为数组，并且list不应为空数组，只有在将List道具传递给Cart之前，才进行映射或在父组件本身中进行检查这样您就无需在购物车组件中再次检查即可直接绘制地图

    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：[]}，这样您就不必检查它是否未定义或为null。您可以检查数组的长度并绘制地图

Answer 5

您能否将代码传递到将列表传递到cart组件的位置。

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

Cart.defaultProps = {
     list: []
}

尽管我建议修复代码崩溃的根本问题，但您是否也可以提供错误日志。

必要的道具和存在检查

5 个答案: