React中无法将输入框数据输出为列表元素？求排查错误原因

核心错误原因 #

你在App.js里给Form组件传递回调函数时，用了formData={addData}这个props名，但Form组件定义时接收的props是addData，导致Form内部的addData实际是undefined，调用时就会抛出“不是函数”的错误。

第一步：修正props传递 #

把App.js里的<Form formData={addData} />改成<Form addData={addData} />，让props名和组件接收的参数匹配。

其他需要优化的点 #

1. 列表渲染缺少key：React列表渲染必须给每个元素加唯一key属性，否则会触发警告，也影响性能。
2. li标签无显示内容：当前的<li data={data.formData} />仅添加了data属性，页面上看不到输入的内容，需要把内容渲染出来。
3. 第二个输入框未绑定状态：Form里第二个输入框没有绑定state，提交时无法获取它的值，建议补充状态绑定。

修正后的完整代码 #

App.js

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

export default function App() {
  const [displayData, setDisplayData] = useState([]);

  const addData = (formData) => {
    // 把表单数据打包成对象保存，同时记录姓名和地址
    setDisplayData([...displayData, formData]);
  };

  return (
    <div className="App">
      <ul>
        {displayData.map((data, index) => (
          // 添加唯一key，同时渲染表单内容
          <li key={index}>
            姓名：{data.name}，地址：{data.address}
          </li>
        ))}
      </ul>

      <Form addData={addData} />
    </div>
  );
}

Form.js

import { React, useState } from "react";

const Form = ({ addData }) => {
  // 新增address状态，绑定第二个输入框
  const [name, setName] = useState("");
  const [address, setAddress] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    // 把两个输入框的数据打包成对象传递给父组件
    addData({ name, address });
    // 提交后清空输入框
    setName("");
    setAddress("");
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>Hier kommt die neue Form:</label>
        <br />
        <input
          placeholder="Vor- und Nachname"
          type="text"
          value={name}
          required
          onChange={(event) => setName(event.target.value)}
        />
        <br />
        <input
          placeholder="Hausnummer und PLZ"
          type="text"
          required
          value={address}
          onChange={(event) => setAddress(event.target.value)}
        />
        <br />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default Form;

说明 #

修正后不仅解决了addData is not a function的错误，还完善了表单数据的收集和展示逻辑，提交后会自动清空输入框，同时在列表里完整显示姓名和地址信息。

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