如何在点击反应时将元素添加到数组中？答案

【问题标题】：How to add elements to array on click in react?如何在点击反应时将元素添加到数组中？
【发布时间】：2020-08-28 08:20:06
【问题描述】：

我对反应非常陌生（我只使用过类），我想将我的输入值添加到 foodList 并将它们写在屏幕上，但我的大脑被锁定了，我无法弄清楚如何......

任何提示都会有所帮助，谢谢！

import React, {useState, useEffect} from 'react';


const Form = () => {

    const [recipe, setRecipe] = useState("");
    const [ingrediens, setIngrediens] = useState("");
    const [foodList, setFoodList] = useState([])

    const handleChange = event => {
        setIngrediens({[event.target.name]: event.target.value})
        setRecipe({[event.target.name]: event.target.value})
    }

    const handleClick = event => {   // Here is where i get problem

    }   

    return (
        <main>
            <button onClick={handleClick}>add</button>
            <div className="form">
            <input type="text" placeholder="Enter your recipe" name="recipe" onChange={handleChange} ></input>
            <input type="text" placeholder="Enter your ingrediens" name="ingrediens" onChange={handleChange} ></input>
            </div>

            <div className="results">
               <ul>
                   {foodList.map(i => (
                       <li key={i}> {recipe} <p> {ingrediens} </p> </li>
                   ))}
               </ul>
            </div>
        </main>
    )
}

export default Form;

【问题讨论】：

可能你想在handleClick 函数中调用setFoodList 函数。这个 SO 问题也有帮助：Push method in React Hooks (useState)

标签： javascript arrays reactjs higher-order-functions

【解决方案1】：

我想你想要this 之类的东西？我还重构了代码的其他部分，比如handleChange，看起来有点奇怪。

const Form = () => {
  const [recipe, setRecipe] = useState("");
  const [ingrediens, setIngrediens] = useState("");
  const [foodList, setFoodList] = useState([]);

  const handleChangeRecipe = event => {
    setRecipe(event.target.value);
  };
  const handleChangeIngredients = event => {
    setIngrediens(event.target.value);
  };
  const handleClick = event => {
    setFoodList([...foodList, { recipe: recipe, ingrediens: ingrediens }]);
  };

  console.log(foodList);
  return (
    <main>
      <button onClick={handleClick}>add</button>
      <div className="form">
        <input
          type="text"
          placeholder="Enter your recipe"
          name="recipe"
          onChange={handleChangeRecipe}
        />
        <input
          type="text"
          placeholder="Enter your ingrediens"
          name="ingrediens"
          onChange={handleChangeIngredients}
        />
      </div>

      <div className="results">
        <ul>
          {foodList.map((x, i) => (
            <li key={i}>
              {" "}
              {x.recipe} <p> {x.ingrediens} </p>{" "}
            </li>
          ))}
        </ul>
      </div>
    </main>
  );
};

【讨论】：

【解决方案2】：

你需要用新数组更新 foodList 状态钩子：

const handleClick = event => {   
  setFoodList([...foodlist, { new element values }]);
}

差不多就是这样，如果你更新状态，组件将重新渲染并显示更新后的食物列表

【讨论】：