React中如何根据ID获取博客数据并回显到输入框用于编辑？

你的代码存在多处逻辑问题，导致无法正确获取并展示待编辑的博客数据，以下是问题拆解和修复方案：

核心问题梳理 #

1. 编辑函数遍历逻辑错误：handleEditBlog里用for...in遍历数组时，拿到的是字符串类型的数组索引（如0/1/2），而非博客对象，所以blogData.id永远为undefined，无法匹配目标ID，也就不会触发编辑数据的设置。
2. 编辑数据存储错误：即使找到目标数据，你把整个博客数组赋值给了editData，而非单个选中的博客对象，导致后续渲染时会显示所有博客，不符合单条编辑的需求。
3. 受控输入框无更新逻辑：输入框设置了value但缺少onChange事件，用户无法修改内容，失去编辑功能的意义。
4. 标题截断逻辑颠倒：原代码!heading && heading.length > 15的判断逻辑错误，会在标题为空时才执行截断，不符合预期。

修改后的完整代码 #

import "./styles.css";
import React, { useState } from "react";

const blogListData = [
  {
    id: 1,
    heading: "React state",
    date: "20-May-2022",
    tag: "React",
    count: "3"
  },
  {
    id: 2,
    heading: "Cypress testing detailss",
    date: "21-May-2022",
    tag: "Cypress",
    count: "5"
  },
  {
    id: 3,
    heading: "Unix commands",
    date: "15-June-2022",
    tag: "Cypress",
    count: "2"
  }
];

export default function App() {
  const [blogList, setBlogList] = useState(blogListData);
  // 初始设为null，标识未选中任何编辑项
  const [editData, setEditData] = useState(null);
  const [helperText, setHelperText] = useState("");

  const handleBlogDelete = (idx) => {
    // 实现删除逻辑
    setBlogList(blogList.filter(blog => blog.id !== idx));
    // 若删除的是正在编辑的项，清空编辑状态
    if (editData?.id === idx) setEditData(null);
    setHelperText("博客已删除");
  };

  const handleEditBlog = (idx) => {
    // 用find方法精准定位目标博客
    const targetBlog = blogList.find(blog => blog.id === idx);
    setEditData(targetBlog);
    setHelperText("");
  };

  // 处理输入框内容更新
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setEditData(prev => ({ ...prev, [name]: value }));
  };

  return (
    <div className="App">
      <div className="blogListSection">
        <h1>编辑博客</h1>
        <div className="row">
          <div className="editBlogSection">
            {blogList.map(({ id, heading, tag, count }) => (
              <div key={id} className="row">
                <a
                  href="javascript:void(0)"
                  className="blogitems"
                >
                  <pre>
                    <span>{tag}</span>{" "}
                    {/* 修正标题截断逻辑 */}
                    {heading && heading.length > 15
                      ? heading.substring(0, 15) + "..."
                      : heading}
                    <span>{count}</span>
                  </pre>
                </a>
                <div className="blogitems edit">
                  <button onClick={() => handleEditBlog(id)}>编辑</button>
                </div>
                <div className="blogitems delete">
                  <button onClick={() => handleBlogDelete(id)}>删除</button>
                </div>
              </div>
            ))}
          </div>
        </div>
        <h1>待编辑博客数据</h1>
        <div className="row">
          {/* 判断存在编辑项时再渲染输入框 */}
          {editData && (
            <div className="editBlogSection">
              <input
                type="text"
                name="heading"
                value={editData.heading}
                onChange={handleInputChange}
              />
              <br />
              <input
                type="text"
                name="tag"
                value={editData.tag}
                onChange={handleInputChange}
              />
            </div>
          )}
        </div>
        <label>
          <span className="adminDeleteMsg">{helperText}</span>
        </label>
      </div>
    </div>
  );
}

关键修改说明 #

1. 修复编辑定位逻辑：用Array.find()替代错误的for...in遍历，精准匹配目标ID的博客对象，并将单个对象存入editData。
2. 调整编辑状态初始值：将editData初始值设为null，渲染时通过editData && ...判断是否展示编辑区域，避免空数组渲染问题。
3. 添加输入框更新逻辑：新增handleInputChange函数，通过受控组件方式实时更新编辑数据，实现正常的编辑交互。
4. 修正标题截断逻辑：将!heading && heading.length >15改为heading && heading.length>15，实现标题过长时自动截断的预期效果。
5. 完善删除联动逻辑：删除博客时同步清空对应编辑状态，并添加操作提示文本。

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