React - “TypeError: undefined is not a function (near '...formFields.map...')”

Question

尝试呈现以下反应脚本时，出现以下错误“TypeError：undefined is not a function（'...formFields.map...'附近）”。 有谁知道我为什么会收到这个错误？

import React, { useState, Fragment } from "react";
import { Container } from "@material-ui/core";

export default function DynamicFields() {
  const [formFields, setFormFields] = useState({
    id: 0,
    firstName: "",
    lastName: "",
  });
  const [nextFieldIndex, setNextFieldIndex] = useState(1);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Input fields: ", formFields);
  };

  const handleChange = (id, e) => {
    let newFields = formFields.map((fieldSet) => {
      if (fieldSet.id === id) {
        fieldSet[e.target.name] = e.target.value;
      }
      return fieldSet;
    });
    setFormFields(newFields);
  };

  return (
    <Container>
      <h3>Add a name</h3>
      <form onSubmit={handleSubmit}>
        {formFields.map((fieldSet) => (
          <div key={fieldSet.id}>
            <input
              type="text"
              name="firstName"
              value={fieldSet.firstName}
              onChange={(e) => handleChange(fieldSet.id, e)}
            />
            <input
              type="text"
              name="lastName"
              value={fieldSet.firstName}
              onChange={(e) => handleChange(fieldSet.id, e)}
            />
          </div>
        ))}
      </form>
    </Container>
  );
}

我不确定为什么会发生这种情况，我大致遵循了一个教程，但这仍然发生了。 任何建议将不胜感激。

Answer 1

formFields不是数组，应将您的formFields state 修改为：

const [formFields, setFormFields] = useState([
  {
    id: 0,
    firstName: "",
    lastName: "",
  }
])