React页面加载时Fetch数据异常致页面崩溃问题求助

核心问题 #

首次加载崩溃的原因是初始状态类型不匹配：

• 你给ClientsList的初始值是对象{}，但接口返回的是数组
• 首次渲染时调用ClientsList.map()，对象没有map方法，直接抛出错误导致应用崩溃
• 注释代码后，接口请求完成，ClientsList被更新为数组，此时取消注释能正常渲染；但刷新后状态重置为对象，再次触发错误

修复步骤 #

1. 修正状态初始值

把useState的初始值从对象改为空数组：

const [ClientsList, setUsersList] = useState([]); 

空数组调用map()会返回空内容，不会报错，同时和接口返回的数据类型保持一致。

2. 修正fetch请求参数

fetch的POST请求中没有data配置项，需要用body传递数据，并且要把数据转为JSON字符串，同时设置正确的请求头：

fetch(BaseURL, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({id: loggedIn})
})

原代码中的data参数不会被fetch识别，可能导致接口无法正确接收参数，进而返回异常数据。

3. （可选）优化列表渲染与用户体验

• 给列表项添加唯一key属性，符合React渲染规范
• 增加加载状态，避免数据未返回时的空白或异常：

const [ClientsList, setUsersList] = useState([]); 
const [loading, setLoading] = useState(true);

React.useEffect(() => {
  let BaseURL = 'https://******.com/taxplanner/rest-apis/users/clientslist';
  fetch(BaseURL, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({id: loggedIn})
  })
  .then((response) => response.json())
  .then((res) => {
    setUsersList(res.clients);
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    setLoading(false);
  });
}, [loggedIn]); // 依赖项改为loggedIn，避免不必要的重复请求

return (
  <>
    <List type="unstyled" className="p-0 text-left bg-white">
      {loading ? (
        <li>加载中...</li>
      ) : (
        ClientsList.map(item => (
          <li key={item.id} className="my-2">
            <a
              className="allFormTitle"
              href="#pablo"
              onClick={(e) => {
                e.preventDefault();
                setSingleClient(item);
              }}
            >
              {`${item.first_name} ${item.last_name}`}
            </a>
          </li>
        ))
      }
    </List>
  </>
)

总结 #

• 确保状态初始值与接口返回数据类型一致
• 遵循fetch的API规范传递POST参数
• 列表渲染必须添加唯一key属性
• 可选添加加载状态提升用户体验

内容的提问来源于stack exchange，提问作者Muhammad Shafique Attari