React Native如何从API返回数据中筛选获取Karnataka邦详情

你可以根据自身业务场景，从以下两种实现方式里选：

方式1：仅存储Karnataka邦数据（适合页面不需要其他邦数据的场景） #

不需要存全量接口返回数据，拿到响应后直接筛选出目标数据再存入状态即可，优先用唯一标识stateCode做匹配（比匹配title更稳定，不会受名称大小写、译名调整影响）。
修改后的代码如下：

// 如果存单个对象，初始值设为null即可；如果需要数组格式初始值保留[]
const [karnatakaState, setKarnatakaState] = useState(null);

useEffect(() => {
    handleGetStates()
}, []);


const handleGetStates = async () => {
    let values = {
        url: `url`,
        method: 'get',
        
    }
    try {
        const response = await axios(values)
        const allStates = response.data;
        // 匹配stateCode为KN的Karnataka邦数据，find返回单个匹配对象
        const targetState = allStates.find(item => item.stateCode === 'KN');
        setKarnatakaState(targetState);
        // 如果需要返回数组格式，把find换成filter即可：const targetStateArr = allStates.filter(item => item.stateCode === 'KN');
        console.log(targetState,'Karnataka详情');
    } catch (error) {
        console.log(error);
    }
};

方式2：保留全量邦数据+单独存Karnataka数据（适合页面既要展示全量邦列表、又要单独使用Karnataka数据的场景） #

原有全量states状态保留，额外新增一个状态存目标邦数据即可，代码修改如下：

const [states, setStates] = useState([]);
// 新增Karnataka数据单独状态
const [karnatakaDetail, setKarnatakaDetail] = useState(null);

useEffect(() => {
    handleGetStates()
}, []);


const handleGetStates = async () => {
    let values = {
        url: `url`,
        method: 'get',
        
    }
    try {
        const response = await axios(values)
        const allStates = response.data;
        // 存全量数据
        setStates(allStates);
        // 单独筛选Karnataka数据存储
        const karnatakaData = allStates.find(item => item.stateCode === 'KN');
        setKarnatakaDetail(karnatakaData);
        console.log(allStates,'全量邦列表');
        console.log(karnatakaData,'Karnataka详情');
    } catch (error) {
        console.log(error);
    }
};

注意事项 #

• 优先使用stateCode作为匹配条件，不推荐直接匹配title字段：接口返回的title是全大写格式（KARNATAKA），如果后续后端调整title大小写、拼写，直接匹配title会导致筛选失效，而stateCode是固定唯一值，匹配可靠性更高
• 数据使用时建议加可选链（比如karnatakaDetail?.title），避免接口未返回、未匹配到数据时读取属性触发空值报错

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