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: "",
  }
])