Блог

Я получил следующую ошибку «Ошибка типа: неопределенный не является функцией (рядом с ‘… 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>
  );
}
 

Я не уверен, почему это происходит, и я примерно следовал руководству, но это все равно произошло. Любой совет был бы очень признателен.

formFields не является массивом, следует изменить ваше formFields состояние на это:

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