如何从Axios请求中提取指定单条最新记录并在UI展示

核心思路 #

要只展示ID最大的最新记录，需完成两步操作：从接口返回数据中筛选出目标单条记录，再修改渲染逻辑，放弃遍历所有记录，只渲染筛选出的单条内容。

具体修改 #

1. 数据处理：提取最新记录

如果接口返回的是记录数组，通过reduce方法找出ID最大的记录；如果接口直接返回单条记录对象，直接存储即可。
修改useEffect中的数据处理逻辑：

useEffect(() => {
  console.log(asms_number);
  axios(`http://localhost:8000/api/v1/pprecords/latest/${asms_number}`)
    .then((response) => {
      console.log(response.data);
      let latestRecord = null;
      // 处理数组情况：筛选ID最大的记录
      if (Array.isArray(response.data)) {
        latestRecord = response.data.length > 0 
          ? response.data.reduce((prev, curr) => prev.id > curr.id ? prev : curr, {})
          : null;
      } else {
        // 接口直接返回单条对象的情况
        latestRecord = response.data;
      }
      setPprecords(latestRecord);
      setError(null);
    })
    .catch(setError);
}, [checkForRecords]);

2. 调整状态初始值

现在存储的是单条记录而非数组，把pprecords的初始值从数组改为null：

const [pprecords, setPprecords] = useState(null);

3. 渲染逻辑：只渲染单条记录

删除map遍历逻辑，直接判断记录是否存在，再渲染对应的输入框：

if (error) return <p>An error occurred</p>;

return (
  <div>
    {pprecords && (
      <Box component="form" sx={{ '& .MuiTextField-root': { m: 0.5, width: '80ch' } }}>
        <div>
          <TextField
            error
            className="Font"
            fullWidth
            id="outlined-multiline-static"
            size="small"
            variant="outlined"
            label={pprecords.date}
            multiline
            rows={5}
            value={pprecords.pprecord}
          />
        </div>
      </Box>
    )}
  </div>
);

完整修改后的代码 #

import { useState, useEffect } from 'react';
import axios from 'axios';
import { Box, TextField } from '@mui/material';

function PriorityProgressTrim({ asms_number }) {
  const [checkForRecords, setCheckForRecords] = useState(true);
  const [pprecords, setPprecords] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    console.log(asms_number);
    axios(`http://localhost:8000/api/v1/pprecords/latest/${asms_number}`)
      .then((response) => {
        console.log(response.data);
        let latestRecord = null;
        if (Array.isArray(response.data)) {
          latestRecord = response.data.length > 0 
            ? response.data.reduce((prev, curr) => prev.id > curr.id ? prev : curr, {})
            : null;
        } else {
          latestRecord = response.data;
        }
        setPprecords(latestRecord);
        setError(null);
      })
      .catch(setError);
  }, [checkForRecords]);

  if (error) return <p>An error occurred</p>;

  return (
    <div>
      {pprecords && (
        <Box component="form" sx={{ '& .MuiTextField-root': { m: 0.5, width: '80ch' } }}>
          <div>
            <TextField
              error
              className="Font"
              fullWidth
              id="outlined-multiline-static"
              size="small"
              variant="outlined"
              label={pprecords.date}
              multiline
              rows={5}
              value={pprecords.pprecord}
            />
          </div>
        </Box>
      )}
    </div>
  );
}

export default PriorityProgressTrim;

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