React JS输入带ID路由URL时无法调用API获取对应单条数据怎么办？

问题核心原因 #

1. 直接通过URL访问页面时，search状态初始值为空，你仅在点击Link触发inputhandler时才会给search赋值，因此过滤数据时匹配不到对应id的条目。
2. useEffect中定义了获取列表数据的getload方法，但没有执行调用，页面初始化时不会主动拉取后端数据。
3. useEffect依赖项为空，URL参数id变化时不会重新触发逻辑更新展示内容。
4. 部分状态初始化、过滤逻辑存在不规范的问题，会引发额外异常。

修复步骤 #

1. 修正Hello.js的状态初始化和副作用逻辑 #

• search初始值设置为从URL参数获取到的id
• 补全useEffect中getload的调用，同时将id加入依赖项，每次URL参数变化时都重新同步search的值
• 修正loading初始值为布尔值，修正filter的返回逻辑

2. 访问URL时注意不要多输冒号，正确访问地址为http://localhost:3000/hell/2而非带冒号的/hell/:2 #

修正后Hello.js代码 #

import { useParams, useHistory, generatePath, Link } from 'react-router-dom';
import { useState, useEffect } from 'react';
import axios from 'axios';
import Help from './Help'; // 请根据你的实际引入路径调整

const Hell = () => {
  let { id } = useParams();
  const [loading, setloading] = useState(false);
  const [posts, setposts] = useState([]);
  const [search, setsearch] = useState(id); // 初始值直接取URL中的id
  const [message, setmessage] = useState("");
  const history = useHistory();

  useEffect(()=>{
    // URL参数变化时同步更新search的值
    setsearch(id);
    const getload = async ()=>{
      setloading(true);
      try {
        const response = await axios.get(`http://127.0.0.1:8000/list/`);
        setposts(response.data);
        setmessage("");
      } catch (err) {
        setmessage("加载数据出错");
      }
      setloading(false);
    }
    // 调用执行请求
    getload();
  },[id]); // 加入id作为依赖，参数变化时重新执行

  function inputhandler(a){
    id = a;
    history.push(generatePath("/hell/:id", { id }));
    setsearch(a);
  }

  return (
    <div>
      <h1>Find : {id}</h1>
      {
        posts.map((curElem) =>{
          return(
            <div key={curElem.id}>
              <Link to={String(curElem.id)} onClick={() => inputhandler(curElem.id)}>{curElem.title}</Link>
            </div>
          )
        })
      }

      {
        loading ? (<h4>Loading...{message}</h4>) : 
        posts.filter(value => value.id == search) // 修正filter逻辑，直接返回布尔匹配结果
        .map(item => <Help key={item.id} title={id}></Help>)
      }                
    </div>
  )
}

export default Hell;

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