动态添加输入元素以形成反应

我试图从我的表单动态地将状态添加到一个数组中，这样多个输入最终可以保存为同一个数组中的状态，很像 redux 表单，但我还不知道 Redux。

我不知道如何访问我所在的当前数组，所以我可以将当​​前输入值设置为状态。在这种情况下，我试图通过映射当前数组来将成分名称保存在配方状态内的成分数组中。问题是当我尝试映射当前数组时，它显然根本不是一个数组，当我尝试将数据输入到输入中时出现以下错误..

TypeError: currentIngredients.map is not a function
(anonymous function)
src/components/recipes/Recipe_Form.js:68
  65 | <input
  66 |   onChange={e => {
  67 |     const name = e.target.value;
> 68 |     setRecipe((currentIngredients) =>
     | ^  69 |       currentIngredients.map(x =>
  70 |         x.id === i.id
  71 |           ? {

. 我不确定如何以可以编辑状态的方式访问成分数组。

谢谢

export const Recipe_Form = () => {
  const recipeContext = useContext(RecipeContext);

  const [recipe, setRecipe] = useState({
    title: "",
    img: "",
    ingredients: [{ id: "1", name: "cheese", amount: "200" }],
    method: "",
    serves: "",
    time: "",
  });

  const onChange = (e) =>
    setRecipe({ ...recipe, [e.target.name]: e.target.value });

  const onSubmit = (e) => {
    e.preventDefault();
    recipeContext.addRecipe(recipe);
    setRecipe({
      title: "",
      img: "",
      ingredients: [],
      method: "",
      serves: "",
      time: "",
    });
  };

  const { title, img, ingredients, method, serves, time } = recipe;

  return (
    <div className='row center-align'>
      <form className='col s12' onSubmit={onSubmit}>
        {/* Image */}
        <div className='input-field col s12 center-align'>
          <input
            type='text'
            placeholder='Please enter an image url'
            name='img'
            value={img}
            onChange={onChange}
          />
        </div>
        {/* Title */}
        <div className='input-field col s12 center-align'>
          <input
            type='text'
            placeholder='Please enter recipe title'
            className='validate'
            name='title'
            value={title}
            onChange={onChange}
          />
        </div>

        {ingredients.map((i) => {
          return (
            <div key={i.id}>
              <input
                onChange={(e) => {
                  const name = e.target.value;
                  setRecipe((currentIngredients) =>
                    currentIngredients.map((x) =>
                      x.id === i.id
                        ? {
                            ...x,
                            name,
                          }
                        : x
                    )
                  );
                  // e.target.value
                }}
                value={i.name}
                placeholder='ingredient'
              />

              <input value={i.amount} placeholder='amount' />
            </div>
          );
        })}
        {/* Method */}
        <div className='methodContainer'>
          <div className='row method-line'>
            <div className='input-field col s12 center-align'>
              <input
                type='text'
                placeholder='Please enter method'
                className='validate'
                name='method'
                value={method}
                onChange={onChange}
              />
            </div>
          </div>
        </div>
        <a className='btn-floating btn-large waves-effect waves-light red'>
          <i className='fas fa-plus'></i>
        </a>
        {/* Serves */}
        <div className='input-field col s12 center-align'>
          <input
            type='number'
            placeholder='Number of servings'
            className='validate'
            name='serves'
            value={serves}
            onChange={onChange}
          />
        </div>
        {/* Time */}
        <div className='input-field col s12 center-align'>
          <input
            type='text'
            placeholder='Time to compelete...'
            className='validate'
            name='time'
            value={time}
            onChange={onChange}
          />
        </div>
        <br></br>
        <button
          className='btn waves-effect waves-light'
          type='submit'
          name='action'>
          Submit
        </button>
      </form>
    </div>
  );
};

export default Recipe_Form;