Отфильтровать нулевое значение из массива в React

Question

Я хочу пропустить все пустые значения из массива в 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) => 

Как я могу избежать нулевого значения и получить доступные данные (в моем случае только три объекта)

Answer 1

Выполните обе условные проверки за один проход. Если цитата верна и , в полях есть совпадающий пользователь или компания для пользователя, pu sh 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);

К вашему сведению, каждый раз, когда вы видите карту / фильтр или фильтр / карту, это должно быть хорошим показателем для использования функции уменьшения.

Answer 2

Снова отфильтруйте результаты, чтобы удалить элементы 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>)