React使用Axios GET请求筛选taken:true数据并存入state的实现示例

核心处理逻辑：拿到Axios返回的数组响应后，调用Array.filter(item => item.taken)即可筛选出所有taken: true的条目，存入state后直接渲染即可。

基于React Hooks实现，用useState存储筛选结果，useEffect触发请求：

import { useState, useEffect } from 'react';
import axios from 'axios';

function FilteredUserList() {
  // 存储所有taken为true的条目
  const [takenUsers, setTakenUsers] = useState([]);

  useEffect(() => {
    // 发起GET请求
    const fetchData = async () => {
      try {
        const res = await axios.get('替换为你的实际请求地址');
        // 筛选taken为true的条目
        const filteredList = res.data.filter(item => item.taken);
        setTakenUsers(filteredList);
      } catch (error) {
        console.error('请求失败：', error);
      }
    };
    fetchData();
  }, []);

  return (
    <div>
      <h3>已标记的用户列表</h3>
      <ul>
        {takenUsers.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default FilteredUserList;

基于React.Component实现，在componentDidMount生命周期中发起请求：

import React, { Component } from 'react';
import axios from 'axios';

class FilteredUserList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      takenUsers: []
    };
  }

  componentDidMount() {
    // 发起GET请求
    axios.get('替换为你的实际请求地址')
      .then(res => {
        // 筛选taken为true的条目
        const filteredList = res.data.filter(item => item.taken);
        this.setState({ takenUsers: filteredList });
      })
      .catch(error => {
        console.error('请求失败：', error);
      });
  }

  render() {
    const { takenUsers } = this.state;
    return (
      <div>
        <h3>已标记的用户列表</h3>
        <ul>
          {takenUsers.map(user => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default FilteredUserList;

如果返回的响应数据存在重复id的情况，你可以提前对数组做去重处理后再筛选，避免渲染时key重复告警。

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