如何在React页面间传递ID？（Datatable.jsx与Single.jsx）

步骤1：修改Datatable.jsx传递ID #

在actionColumn的renderCell方法中，调整<Link>组件，通过state传递当前行的文章ID：

// Datatable.jsx中actionColumn的renderCell部分
<Link 
  to={{
    pathname: "/users/test", // 保持你原有的Single页面路由
    state: { articleId: params.row.id } // 传递当前行的文章ID
  }} 
  style={{ textDecoration: "none" }}
>
  <div className="viewButton">Modifier</div>
</Link>

步骤2：修改Single.jsx接收ID并处理数据 #

1. 先导入useLocation钩子用于获取路由状态：

import { useLocation } from 'react-router-dom';

2. 在组件内获取传递的ID，并在挂载时请求对应文章的数据：

const Single = ({ inputs, title }) => {
  const location = useLocation();
  const articleId = location.state?.articleId; // 接收传递的ID，可选链避免刷新报错
  const [data, setData] = useState({
    code: "",
    article: "",
    price: 0,
    vat: 0,
    status: 0,
    company_id: 0,
  });

  // 组件挂载时根据ID拉取文章详情
  useEffect(() => {
    if (articleId) {
      fetch(`https://api.factarni.tn/article/${articleId}`, {
        method: "GET",
        headers: {
          Authorization: "Bearer eyJhbGciOiJ...w2QWltkyA", // 保持你的授权头
        },
      })
      .then(response => response.json())
      .then(fetchedData => setData(fetchedData));
    }
  }, [articleId]);

  // 保持原有handle、normalize函数不变，修正表单输入框的绑定逻辑
  function handle(e) {
    const newdata = { ...data };
    newdata[e.target.id] = e.target.value;
    setData(newdata);
  }

  const normalize = (v) => ({
    code: v.code,
    article: v.article,
    price: Number(v.price),
    vat: Number(v.vat),
    status: Number(v.status),
    company_id: Number(v.company_id),
  });

  // 修正更新接口的URL，指向对应ID的文章
  const handleClick = async (e) => {
    e.preventDefault();
    const body = normalize(data);

    await fetch(`https://api.factarni.tn/article/${articleId}`, {
      method: "PUT",
      body: JSON.stringify(body),
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer eyJhbGciOiJ...w2QWltkyA",
      },
    });
  };

  return (
    <div className="New">
      <Sidebar />
      <div className="newContainer">
        <Navbar />
        <div className="top">
          <h1>{title}</h1>
        </div>
        <div className="bottom">
          <div className="right">
            <form>
              <div className="formInput"></div>
              {inputs.map((input) => {
                // 确保输入框ID和data字段名匹配，比如"Code"对应data.code
                const fieldName = input.label.toLowerCase();
                return (
                  <div className="formInput" key={input.id}>
                    <label>{input.label} </label>
                    <input
                      type={input.type}
                      placeholder={input.placeholder}
                      onChange={(e) => handle(e)}
                      id={fieldName}
                      name={fieldName}
                      value={data[fieldName] || ""} // 绑定对应的数据字段
                    />
                  </div>
                )
              })}
              <button onClick={handleClick}>Update</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

注意事项 #

• 确保路由配置中/users/test对应的是Single组件
• 使用location.state?.articleId的可选链操作符，避免页面直接刷新时state不存在引发报错
• 表单输入框的id要和data中的字段名对应，保证数据双向绑定正常

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