React中花括号内的花括号答案

【问题标题】：Curly braces inside curly braces in ReactReact中花括号内的花括号
【发布时间】：2019-01-26 11:37:35
【问题描述】：

我在 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>
);

【问题讨论】：

打印有什么错误吗？
你的意思是哪一行有问题？

标签： javascript arrays reactjs object jsx

【解决方案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}/>)
}

检查这个sn-p，你会得到一个更好的主意：

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);

【讨论】：

感谢您的帮助和解释
很高兴，这对你有帮助:)

【解决方案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>
};

【讨论】：