javascript - 遍历 react 元素中的未定义/空对象

Question

我有一个 super 简单的 react 元素，如下所示:

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

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

它将 stores(它是一个 POJO，而不是数组)作为一个 prop 并遍历它的键以显示商店的名称。

问题是，当我以这种方式编写 react 元素时，stores 在我的应用程序中未定义或此时可能为 null，这会导致 Object.keys抛出错误，因为您无法遍历 undefined 或 null。

我想要的是如果 stores 未定义或为 null，此 React 组件的行为是不渲染。

我想避免包装我的 renderStores 函数并检查未定义/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>
)

如果您有一个需要维护的空状态，您可以在条件的错误返回中传递它。

我经常通过多种方式来做到这一点。