React ListArticle组件添加文章至列表后无法显示问题求助

编写的ListArticle组件点击“Ajouter”按钮后，无法将输入的文章信息添加到列表中，核心问题出在handlerAddArticle函数的实现，以及列表渲染的方式上。

原组件代码 #

import React, { useState } from "react";
export default function ListArticle() {
  const [id, setId] = useState(0);
  const [designation, setDesignation] = useState("");
  const [prix, setPrix] = useState(0);
  const [Article, setArticle] = useState([]);
  const handlerOnChangeId = (e) => {
    setId(e.target.value);
  };
  const handlerOnChangeDesignation = (e) => {
    setDesignation(e.target.value);
  };
  const handlerOnChangePrix = (e) => {
    setPrix(e.target.value);
  };
  const handlerAddArticle = (e) => {
    setArticle(e.target.Article);
  };
  return (
    <div className="container">
      <div className="list">
        <h2 className="title">Ajout d'un Article</h2>
        <div>
          <label>Id:</label>
          <input type="text" onChange={handlerOnChangeId} value={id} />
        </div>
        <div>
          <label>designation:</label>
          <input type="text" onChange={handlerOnChangeDesignation} value={designation}/>{" "}
        </div>{" "}
        <div>
          {" "}
          <label>prix:</label>
          <input type="text" onChange={handlerOnChangePrix} value={prix} />{" "}
        </div>{" "}
        <div>
          {" "}
          <input type="button" value="Ajouter" onClick={handlerAddArticle}/>{" "}
        </div>{" "}
        <div>
          {" "}
          <h3>liste Articles</h3>
          <ul>{Article}</ul>{" "}
        </div>{" "}
      </div>{" "}
    </div>
  );
}

问题分析 #

1. 添加函数逻辑错误：原handlerAddArticle中e.target.Article完全无效，e.target是触发点击的按钮元素，不存在Article属性，无法获取要添加的文章数据，也没有正确更新数组状态。
2. 列表渲染错误：直接将数组Article放入<ul>中无法正确渲染，React需要将数组元素转换为对应的React元素（比如<li>）。

修复后的代码 #

import React, { useState } from "react";
export default function ListArticle() {
  const [id, setId] = useState(0);
  const [designation, setDesignation] = useState("");
  const [prix, setPrix] = useState(0);
  const [articles, setArticles] = useState([]); // 变量名改为复数更规范

  const handlerOnChangeId = (e) => {
    setId(e.target.value);
  };

  const handlerOnChangeDesignation = (e) => {
    setDesignation(e.target.value);
  };

  const handlerOnChangePrix = (e) => {
    setPrix(e.target.value);
  };

  const handlerAddArticle = () => {
    // 创建新的文章对象
    const newArticle = {
      id: id,
      designation: designation,
      prix: prix
    };
    // 用函数式更新数组，确保基于最新的状态添加新元素
    setArticles(prevArticles => [...prevArticles, newArticle]);
    
    // 重置输入框内容（可选，提升体验）
    setId(0);
    setDesignation("");
    setPrix(0);
  };

  return (
    <div className="container">
      <div className="list">
        <h2 className="title">Ajout d'un Article</h2>
        <div>
          <label>Id:</label>
          <input type="text" onChange={handlerOnChangeId} value={id} />
        </div>
        <div>
          <label>designation:</label>
          <input type="text" onChange={handlerOnChangeDesignation} value={designation}/>
        </div>
        <div>
          <label>prix:</label>
          <input type="text" onChange={handlerOnChangePrix} value={prix} />
        </div>
        <div>
          <input type="button" value="Ajouter" onClick={handlerAddArticle}/>
        </div>
        <div>
          <h3>liste Articles</h3>
          <ul>
            {/* 遍历数组生成li元素，展示每个文章的信息 */}
            {articles.map((article, index) => (
              <li key={index}>
                ID: {article.id} | 名称: {article.designation} | 价格: {article.prix}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}

关键修改点 #

• 修正添加逻辑：创建包含输入数据的文章对象，通过展开运算符将新对象添加到原数组末尾，使用函数式更新保证状态的正确性。
• 修复列表渲染：使用map遍历文章数组，为每个元素生成<li>，并添加唯一的key属性（这里用索引，实际项目建议用文章id）。
• 优化体验：添加文章后重置输入框内容，方便继续添加新文章。
• 变量名规范：将Article改为articles，符合复数命名习惯，更易理解。

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