如何在单击反应时将元素添加到数组？

Question

我对反应很陌生（我只使用过类 abit），我想将我的输入值添加到 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;

Answer 1

您需要使用新数组更新 foodList 状态挂钩：

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

差不多就是这样，如果您更新状态，组件将重新渲染并显示更新后的 foodList。

编辑#1：我在 setFoodList 中使用了回调方式，这样如果用户非常快速地点击按钮就不会出现竞争条件。这是一个边缘案例，但很高兴。

Answer 2

我想你想要 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>
  );
};

如何在单击反应时将元素添加到数组？

How to add elements to array on click in react?

javascript

arrays

higher-order-functions

reactjs