reactjs - 如何遍历来自 api 的对象列表并将其渲染到 jsx 页面 React 功能组件

Question

我正在尝试使用 useEffect 从 api 响应中获取数组项列表，因此我得到了一个对象列表。我想使用 Objects.key() 方法转换它，但是当我遍历它时，值不会打印在 View 页面上。响应不断从 api 响应返回调用。
API调用

 export function getServicesById(facility_id) {     
  return axios
        .get(`${baseURL}patients/appointments/1`)
        .then((response) => {
            if(response.status===200){
                // console.log(response.data)
                return response
            }
        }).catch(error => {
            console.log('error', error)
            return error
        });
    }

useEffect 获取响应数据

  useEffect(() => {
    getServicesById()
      .then((res) => {
        setResponseData(res.data);
      })
      .catch((error) => {
        console.log(error);
      });
    // console.log('data is', newResponseData);
  }, [responseData, setResponseData]);

将对象转换为数组项

 const newResponseData = Object.keys(responseData).reduce((array, key) => {
    return [...array, { key: responseData[key] }];
  }, []);

我正在渲染数据的 Jsx 页面

<TableBody>              
  {newResponseData &&
    newResponseData.map((serv, index) => (
    <TableRow key={index}>
       <TableCell align="left" data-label="Action">
           <Field
              name="status"
              component={renderSelectInput}
              variant="outlined"
              size="small"
              className="fileds"
              inputClass="sm-filed"
            >
            <MenuItem selectedValue="progress">
               In progress
             </MenuItem>
             <MenuItem value="closed">
              Closed
             </MenuItem>
            </Field>
            </TableCell>
            <TableCell data-label="Id">{serv.id}</TableCell>
            <TableCell data-label="Patient name">{serv.patient_name}</TableCell>
            <TableCell data-label="Test Name">{serv.test_name}</TableCell>
        </TableRow>
      ))}
   </TableBody>

Answer 1

问题
您正在使用 useEffect效果更新的依赖项:

useEffect(() => {
  getServicesById()
    .then((res) => {
      setResponseData(res.data);
    })
    .catch((error) => {
      console.log(error);
    });
}, [responseData, setResponseData]);

responseData由效果更新，更新时将触发另一个重新渲染，效果将再次运行。您可能只想在组件安装时获取一次数据。
我看到的另一个潜在问题是 newResponseData数组的对象只有 key key 。

const newResponseData = Object.keys(responseData).reduce((array, key) => {
  return [...array, { key: responseData[key] }];
}, []);

但是在渲染中您试图访问 id , patient_name , 和 test_name特性。这些是未定义的，因为 { key: responseData[key] }没有任何这些属性。
解决方案
删除 useEffect依赖，因此效果在组件安装时运行一次。因为我还认为您打算计算来自 responseData 的对象值数组要在您的 UI 中映射，您可以执行一次 之前 将数据发送到状态。

useEffect(() => {
  getServicesById()
    .then((res) => {
      const data = Object.values(res.data)
      setResponseData(data);
    })
    .catch((error) => {
      console.log(error);
    });
}, []);

然后只需映射您的 responseData状态:

<TableBody>              
  {responseData && responseData.map((serv, index) => (
    <TableRow key={index}>
       <TableCell align="left" data-label="Action">
           <Field
              name="status"
              component={renderSelectInput}
              variant="outlined"
              size="small"
              className="fileds"
              inputClass="sm-filed"
            >
            <MenuItem selectedValue="progress">
               In progress
             </MenuItem>
             <MenuItem value="closed">
              Closed
             </MenuItem>
            </Field>
            </TableCell>
            <TableCell data-label="Id">{serv.id}</TableCell>
            <TableCell data-label="Patient name">{serv.patient_name}</TableCell>
            <TableCell data-label="Test Name">{serv.test_name}</TableCell>
        </TableRow>
      ))}
   </TableBody>