Question

我在React中有演示组件。并使用products.some尝试检查products中是否有任何项目。并且如果选中了某些项目，则为RequestedProduct组件渲染父块。我知道问题在于第二对花括号，因为React认为这是一个支柱。还有另一种方法吗？

const Requested = ({ products, getCurrentTime }) => (
  <div className="pepper-pin-body-tab requested-tab">
    <div className="pepper-pin-body-tab-title">
      Запрошенные
    </div>
    <div className="pepper-pin-body-tab-indicator" />
    {products.some(product => product.checked) ? (
      <div className="requested-tab-list-requested">
        <div className="requested-tab-list-requested-time">
          {getCurrentTime()}
        </div>
        {products.filter((product, key) => {
          if (product.checked) {
            return (
              <RequestedProduct
                key={key}
                title={product.title}
              />
            );
          }
        })}
      </div>
    ) : null}
  </div>
);

Answer 1

问题是，filter将不会返回自定义元素/值，它将始终返回从过滤器主体返回true的数组元素。

解决方法是，仅使用地图或过滤器和地图的组合。

使用地图：

{
    products.map((product, key) => product.checked ? 
        <RequestedProduct key={key} title={product.title} /> 
        : null
}

使用过滤器和地图的组合：

{
    products
    .filter(product => product.checked)
    .map((product, key) => <RequestedProduct key={key} title={product.title}/>)
}

检查此代码片段，您将获得更好的主意：

const arr = [
  {a: 1},
  {a: 2},
  {a: 3},
  {a: 4}
];

const afterFilter = arr.filter((el,i) => {
  if(i%2) {
    return `Hello world ${i}`;
  }
});

// it will print the array items, not the Hello World string
console.log('afterFilter', afterFilter);

Answer 2

我建议稍微拆分一下代码，这使其意图更加清晰。您将得到以下内容（例如），这些内容不应触发错误。

主要问题在于过滤器的意外副作用，而您最有可能希望使用filter和map。这使得对其他开发人员的意图更加清晰。

const contents = (products, getCurrentTime) => (
    const filtered = products.filter(product => product.checked);
    <div className="requested-tab-list-requested">
        <div className="requested-tab-list-requested-time">
            {getCurrentTime()}
        </div>
        {filtered.map((product, key) => <RequestedProduct key={key} title={product.title}/>)}
    </div>  
);

const Requested = ({products, getCurrentTime}) => {
    const isAnythingChecked = products.some(product => product.checked);

    return <div className="pepper-pin-body-tab requested-tab">
        <div className="pepper-pin-body-tab-title">
            Запрошенные
        </div>
        <div className="pepper-pin-body-tab-indicator"/>
        {isAnythingChecked ? contents(products, getCurrentTime) : null}
    </div>
};

React中的花括号内的花括号

2 个答案: