在React中过滤JSON数组的null及空值，不展示name为空的条目

你可以根据自己的需求选择以下两种实现方式：

方案1：拿到数据后直接过滤，存入state的就是清洗后的数据（推荐） #

这种方案只需执行一次过滤逻辑，后续渲染不需要重复判断，性能更优。
你只需要在排序逻辑前加一行filter过滤逻辑即可，同时注意你原有代码里连续调用了两次sort，第二次无参数的sort会覆盖之前按listId排序的结果，建议删掉多余的排序。
修改后的代码如下：

componentDidMount() {
    fetch('https://url')
        .then(res => res.json())
        .then((data) => {
            // 过滤name为null、空字符串、全空格的条目
            const filteredData = data.filter(item => item.name && item.name.trim())
            // 按listId排序
            filteredData.sort(function (y,x){
                return y.listId - x.listId;
            })
            this.setState({ items: filteredData })
            console.log(this.state.items)
     })
     .catch(console.table)
  }

过滤逻辑说明：item.name && item.name.trim()会自动排除name为null、undefined、空字符串、全空格的所有无效条目，完全匹配你的需求。

方案2：保留原始数据，渲染时过滤 #

如果你需要在state里保留完整的原始数据，只是渲染时不展示无效条目，可以在渲染环节加过滤逻辑：

return (
    <div className="list-container">
        <h1>My List</h1>
        {this.state.items
          // 渲染前先过滤无效条目
          .filter(item => item.name && item.name.trim())
          .map((item) => (
              <div className="list">
                {/* 此处写你原有渲染item的逻辑 */}
              </div>
          ))}
    </div>
)

内容的提问来源于stack exchange，提问作者Andrea