来自输入字段的 Output 数据作为 React 中的列表元素失败 - 为什么？

Question

我正在尝试将输入字段中的 output 数据作为列表元素。 但是，我总是在终点线之前收到错误消息“addData 不是函数”。 有人碰巧知道我的错误在哪里吗？ 我觉得大多数人应该是正确的。 感谢大家！

这是我的 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: formData }]);
  };

  return (
    <div className="App">
      <ul>
        {displayData.map((data) => (
          <li data={data.formData} />
        ))}
      </ul>

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

这是我的 Form.js

import { React, useState } from "react";

const Form = ({ addData }) => {
  const [formData, setFormData] = useState("");

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

export default Form;

Answer 1

您传递的道具称为formData ：

<Form formData={addData} />

但是该组件期望它为addData ：

const Form = ({ addData }) => {

更改一个以匹配另一个。 由于该组件已经有一个名为formData的 state 变量，因此更改用法可能更容易：

<Form addData={addData} />