我试图从外部API呈现这个示例数据(度量值)，但是空元素也会呈现出来。我怎么能排除它？

Question

> import React from 'react';
import './style.css';

function App() {
  const measurements = [
    '1 cup ',
    '1 large',
    '1 large',
    '1 tbs',
    '2 tsp',
    '1 tsp ',
    '1/2 tsp',
    '1/2 tsp',
    '1/4 tsp',
    '1/4 tsp',
    '4 cups ',
    '1 cup ',
    'Pinch',
    ' ',
    ' ',
    ' ',
    ' ',
    ' ',
    ' ',
    ' ',
  ];

  const flattenArray = (str) => {
    return str?.map((char, i) => {
      return char? (i < str.length - 1 ? char + ',' : char + '.') : null;
    });
  };

  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Measurement: {flattenArray(measurement)}</p>
    </div>
  );
}

export default App;

//结果为:1杯、1大、1大、1 tbs、2 tsp、1 tsp、1/2 tsp、1/2 tsp、1/4 tsp、1/4 tsp、4杯、1杯、夹持、.

//预期结果:1杯、1大、1大、1 tbs、2 tsp、1 tsp、1/2 tsp、1/2 tsp、1/4 tsp、1/4 tsp、4杯、1杯子、1 tsp。

Answer 1

.map方法总是返回尽可能多的数组元素。如果你不需要空元素，它们必须被过滤，

measurements
   .filter(item => item.trim().length > 0)
   .join(', ')
   .concat('.')

Answer 2

你可以试试这个：

 const flattenArray = (str) => {
    return str?.map((char, i) => {
      return char===' ' ?null: (i ===0 ? char : ","+char ) ;
    }) ;
  };

  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Measurement: {flattenArray(measurements)}.</p>
    </div>
  );