时间戳

首页 > 解决方案 > 如何从 api 遍历对象列表并将其呈现到 jsx 页面 React 功能组件

reactjs - 如何从 api 遍历对象列表并将其呈现到 jsx 页面 React 功能组件

问题描述

我正在尝试使用 useEffect 从 api 响应中获取数组项列表，结果我得到了一个对象列表。我想使用 Objects.key() 方法进行转换，但是当我遍历它时，值不会打印在视图页面上。响应不断从 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>

标签： reactjs

解决方案

除了 Drew Reese 的上述回答之外，请在其中使用 setResponseData 时从 useEffect 参数中删除 responseData ，并且每次状态更改都会触发 useEffect ：

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

推荐阅读