React调用API展示犬种图片功能失效问题排查

你的代码跑不通主要是几个核心逻辑写反、触发时机不对，按下面的点逐一排查就行：

• 状态语义完全混淆：你定义的const [breed, selectedBreed] = useState('')把状态和更新方法的用途搞反了。按照命名，breed应该存用户选中的犬种名称，selectedBreed是更新犬种值的方法，但你在请求返回后直接调用selectedBreed(imageUrl)，相当于把原本应该存犬种名的变量直接覆盖成了图片地址。而且组件首次加载时breed是空字符串，拼出来的请求地址是https://dog.ceo/api/breed//images/random，多了一个斜杠，接口根本不会返回正确数据。
• 副作用触发时机错误：你给useEffect传了空依赖数组，意味着请求逻辑只会在组件第一次挂载的时候执行1次，后续用户切换选择不同犬种的时候，根本不会重新发起请求拿对应犬种的图片。
• 缺少基础的校验和容错：你没有在发请求前判断当前是否已经选中了有效犬种，也没有处理接口请求失败、返回格式异常的场景，出问题时没有任何提示，直接静默失败。

修正思路很简单：拆分两个独立状态，一个存用户选中的犬种名，一个存接口返回的图片地址；把犬种状态加到useEffect的依赖数组里，加个判断只有当犬种名不为空的时候才发请求就行。

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