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 键的对象。

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

但在渲染中，您尝试访问 id、patent_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>