从 React 中的数组中过滤出空值答案

【问题标题】：Filter out null value from array in React从 React 中的数组中过滤出空值
【发布时间】：2020-04-23 08:16:13
【问题描述】：

我想在 React 中跳过数组中的所有空值这是我的代码的一部分。我在地图功能之前添加了过滤器，但它看起来不起作用。

componentDidMount(){
        client.getEntries({content_type:'formRequest'}).then(response => {
            this.setState({qoutes: response.items});
        }).catch(e => {
        console.log(e);
        });
    }

render(){

        const user = "name";
        const qoutes = this.state.qoutes
        .filter(i => i !== null)
        .map((qoute, i) => 
        user === qoute.fields.user || user === qoute.fields.company ?
        <QoutesListItem id={i} key={i} qoute={qoute} />
        : null)

        return(<div>{qoutes}<div>)

我试着做这样的功能，但是效果不好

const qoutes = this.state.qoutes.filter((qoutes)=>{
    if(qoutes !== null ) {
      return qoutes;
    }}).map((qoute, i) =>

如何避免空值并获取可用数据（在我的情况下只有三个对象）

【问题讨论】：

过滤器是正确的，但在下一个map 的某些情况下您将返回null。你的null 元素可以来自那里吗？
不确定。逻辑是如果用户等于其中一个字段然后显示它，我在页面上得到三个元素
也许你是对的......但我不知道如何解决它。例如，如果名称不正确，我会得到 14 个空值 ...
在地图之后再做一个过滤器

标签： reactjs dictionary filter

【解决方案1】：

再次过滤结果以从第二个地图中删除 null 元素：

render(){
  const user = "name";
  const qoutes = this.state.qoutes
    .filter(q => !!q)
    .map((qoute, i) => 
        user === qoute.fields.user || user === qoute.fields.company ?
          <QoutesListItem id={i} key={i} qoute={qoute} />
          : 
          null)
    .filter(q => !!q) // Filter falsy values

  return(<div>{qoutes}<div>)

【讨论】：

【解决方案2】：

在一个 reduce pass 中执行两个条件检查。如果报价是真实的并且字段有匹配的用户或公司，则将 JSX 推送到结果数组中。

const qoutes = this.state.qoutes.reduce(
  (quotes, quote, i) => {
    if (
      quote &&
      quote.fields &&
      (user === quote.fields.user || user === quote.fields.company)
    ) {
      quotes.push(<QoutesListItem id={i} key={i} qoute={quote} />);
    }
    return quotes;
  },
  [] // initial empty quotes result array
);

const quotes = [null, null, null, {
  fields: {
    user: 'name'
  }
}, null, {
  fields: {
    company: 'name'
  }
}];

const user = "name";

const quotesRes = quotes.reduce(
  (quotes, quote, i) => {
    if (
      quote &&
      quote.fields &&
      (user === quote.fields.user || user === quote.fields.company)
    ) {
      quotes.push(`<QoutesListItem id={${i}} key={${i}} qoute={${quote.fields.user || quote.fields.company}} />`);
    }
    return quotes;
  }, [] // initial empty quotes result array
);

console.log(quotesRes);

仅供参考，任何时候您看到 map/filter 或 filter/map 都应该是使用 reduce 函数的良好指示。

【讨论】：

@Vova 你有一个拼写错误，“qoute”与“quote”，我错误地复制/粘贴了。我已经尝试在我的回答中更正它们。