React中this.state.users.filter报错非函数，如何提取统计符合条件的用户数据？

报错根因 #

this.state.users.filter is not a function 报错的核心原因是 this.state.users 实际不是数组类型，因此不具备数组的filter方法。
你接口返回的数据不是纯JSON数组，而是带前缀的字符串：返回内容前面多了covid-19-survey-app固定前缀，外层还包裹了Markdown粗体标记**，你直接把原始返回的字符串赋值给了users，才会导致这个问题。

解决方法 #

修改axios请求的then回调逻辑，先对返回数据做清洗，再存入state：

componentDidMount() {
    axios
        .get("http://192.168.0.101/COVID-19-SURVEY-APP/select.php")
        .then(res=>{
            // 第一步：清洗数据，去掉前后的**和前缀字符串
            let rawData = res.data.replace(/^\*\*covid-19-survey-app/, '').replace(/\*\*$/, '')
            // 第二步：把JSON字符串转为数组
            let userList = JSON.parse(rawData)
            // 第三步：容错判断，确保是数组再赋值
            if(Array.isArray(userList)) {
                this.setState({users: userList})
            } else {
                this.setState({users: []})
            }
        })
        .catch((error)=>{
            console.log("Api call error")
            alert(error.message);
        });
}

统计方法优化 #

你当前的countYellow方法冗余，不需要用map累加计数，filter返回的数组长度就是符合条件的条目数，可简化为：

countYellow() {
    // 先判断users是数组再调用filter，避免极端情况报错
    if(!Array.isArray(this.state.users)) return 0
    return this.state.users.filter(item => Number(item.score) >= 1).length
}

注：这里加了Number()转换是因为你返回的score是字符串类型，转成数字再做比较更稳妥

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