Question

我有一个超级简单的反应元素，如下所示：

const Stores = ({ stores }) => {
  const renderStores = () => Object.keys(stores).map(store => {    
    return (
      <div key={store}>
        { store }        
      </div>
    )
  })

  return (
    <div>
      { renderStores() }
    </div>
  )
}

它将stores（它是一个POJO，而不是数组）作为道具并迭代其键以显示商店的名称。

问题是当我以这种方式编写反应元素时，stores未被定义，或者在我的应用中此时可能为空，这会导致Object.keys 抛出错误，因为你不能迭代undefined或null。

我想要的是，如果stores未定义或为null，则此反应组件的行为不呈现。

我想避免需要包装我的renderStores函数并检查undefined / null：

const Stores = ({ stores }) => {
  const renderStores = () => {
    if (stores) {
      return Object.keys(stores).map(store => {    
        return (
          <div key={store}>
            { store }        
          </div>
        )
      })  
    } else {
      return <div></div>
    }    
  }

  return (
    <div>
      { renderStores() }
    </div>
  )
}

但这对眼睛来说并不容易。

我可以这样做：

return (
  <div>
    { stores ? renderStores() : '' }
  </div>
)

但这看起来像样板。

当传入undefined / null以在react元素中迭代时，是否有更好的方法或通用约定来保护Object.keys()不抛出错误？

Answer 1

我认为你最初管理它的方式是正确的方法。我担心的是看起来如何，你可以用这种方式清理一下：

const Stores = ({ stores }) => {
  const renderStores = () => {
    if !(stores) return null;
    return Object.keys(stores).map(store => (
      <div key={store}>
        { store }        
      </div>
    ))    
  }

  return (
    <div>
      { renderStores() }
    </div>
  )
}

如果没有null，则会返回stores并仅呈现<div></div>。

您还可以在参数中添加默认值：

    const Stores = ({ stores = {} }) => {

这将允许您基本上不从键的地图返回任何内容。

第三个选项是，如果stores为stores，则不会从父级提取null。这对你来说可能是最干净的选择。

// parent.js

{ data ? <Stores stores=data /> : null }

// stores.js
const Stores = ({ stores }) => (
  <div>
    { 
      Object.keys(stores).map(store => (
        <div key=store>
          {store}        
        </div>
      ))
    }
  </div>
)

如果你需要维护一个空状态，你可以在有条件的假回报中传递它。

我经常以多种方式这样做。

Answer 2

如果stores是null或undefined，它是假的，您可以使用逻辑OR来代替使用空对象，而没有密钥，不会发生迭代

Object.keys(stores||{}).map(...

你不会得到一个空元素，你需要一个条件

迭代react元素

2 个答案: