Question

在 React Native 中获取数组映射中的非空项[重复]

2022-04-20

1443

javascript arrays reactjs react-native

我已经使用 React Native 循环来填充如下所示的选择项

   const categorylist = arr.map((data, key) => {
      if (data != "") {
        return <Select.Item label={data} value={data} key={data} />;
      }
    });

我循环并像下面这样使用它，当数组包含非空值时它工作正常，但是当有空值时我收到错误

TypeError：null 不是对象（评估'child.props'）

   <Select>
     {categorylist2}
    </Select>

如何使用 map 仅发送非空数组项。请注意我不希望 arr 受到影响，因为我需要它在其他函数中保持不变。

Answer 1

filter 删除空元素，然后 map 遍历 filter 返回的数组。

这里有一个设计出来的例子来向你展示它是如何工作的。

const arr = [undefined, 'Bob', '', 'Sally', 'Joe', '', null, 'Pam'];

// `filter` out the empty/null/undefined elements
// and then `map` over that filtered array
const out = arr
  .filter(el => el)
  .map(el => `<div>${el}</div>`);

document.body.innerHTML = out.join('');

Answer 2

仅当数组不为空时才需要映射数组，并使用 filter(Boolean) 过滤掉空数组。

const newArr = arr.filter(Boolean);
const categorylist = (newArr.length > 0) && newArr.map((data, key) => {
    return <Select.Item label={data} value={data} key={data} />;
});

Answer 3

这是因为在您的映射中，您没有为空值返回任何内容，这意味着 null，这就是您出现错误的原因。映射函数应该始终返回某些内容。

在映射之前使用过滤器，如下所示：

arr.filter(data => data !== "").map(data => <Select.Item label={data} value={data} key={data} />)