如何将对象数组传递给 ReactJS 中的组件道具，不包括键值对具有空字符串的对象

Question

在 ReactJS 项目中，我有以下对象数组：

const arr = [
    {
        key1: 1,
        key2: 'value1'
    },
    {
        key1: 2,
        key2: 'value2'
    },
    {
        key1: 3,
        key2: ''    // empty string, therefore I do not want to pass this object in the array to be passed to the prop
    }
]

我将上面的数组传递给一个道具，如下所示：

<Component
    Array={arr}
/>

问题

我不想传递任何键 'b' 为空字符串的对象（如示例中的第二个对象）。

有什么方法可以将其余对象作为数组传递，而不需要键 'b' 具有空字符串的对象？

Answer 1

您可以将过滤后的数组传递给不包含 key2 为空字符串的对象的组件：

<Component
    Array={arr.filter(({key2}) => key2 !== "")}
/>

下面的 React 示例：

function App() {
  const items = [
    { key1: 1, key2: "value1" },
    { key1: 2, key2: "value2" },
    { key1: 3, key2: "" },
  ];
  return <List items={items.filter(({ key2 }) => key2 !== "")} />;
}

function List({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li>{JSON.stringify(item, null, 2)}</li>
      ))}
    </ul>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

如何将对象数组传递给 ReactJS 中的组件道具，不包括键值对具有空字符串的对象

How to pass an objects array to a component prop in ReactJS excluding objects whose key-value pairs have empty strings

javascript

arrays

json

object

reactjs

问题