Javascript 如何在单击时向数组添加元素？

我是个新手（我只使用过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;

import React，{useState，useffect}来自“React”；
常数形式=（）=>{
const[recipe，setRecipe]=useState（“”）；
const[ingrediens，setIngrediens]=useState（“”）；
const[foodList，setFoodList]=useState（[]）
const handleChange=事件=>{
setIngrediens（{[event.target.name]：event.target.value}）
setRecipe（{[event.target.name]：event.target.value}）
}
const handleClick=event=>{//这里是我遇到问题的地方
}   
返回(
添加

{foodList.map（i=>(
{recipe}{ingrediens}

))}

)
}
导出默认表单；

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

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

---

基本上就是这样，如果更新状态，组件将重新渲染并显示更新的foodList

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

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

---

差不多就是这样，如果更新状态，组件将重新渲染并显示更新后的食物列表，我想您需要类似于？我还重构了代码的其他部分，比如

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>
  );
};

const Form=（）=>{
const[recipe，setRecipe]=useState（“”）；
const[ingrediens，setIngrediens]=useState（“”）；
const[foodList，setFoodList]=useState（[]）；
常量handleChangeRecipe=事件=>{
setRecipe（event.target.value）；
};
常量HandleChangeComponents=事件=>{
设置参数（事件.目标.值）；
};
const handleClick=事件=>{
setFoodList（[…foodList，{recipe:recipe，ingrediens:ingrediens}]）；
};
console.log（foodList）；
返回(
添加

{foodList.map（（x，i）=>(

{" "}
{x.recipe}{x.ingrediens}
{

))}

);
};

我想你想要什么？我还重构了代码的其他部分，比如

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>
  );
};

const Form=（）=>{
const[recipe，setRecipe]=useState（“”）；
const[ingrediens，setIngrediens]=useState（“”）；
const[foodList，setFoodList]=useState（[]）；
常量handleChangeRecipe=事件=>{
setRecipe（event.target.value）；
};
常量HandleChangeComponents=事件=>{
设置参数（事件.目标.值）；
};
const handleClick=事件=>{
setFoodList（[…foodList，{recipe:recipe，ingrediens:ingrediens}]）；
};
console.log（foodList）；
返回(
添加

{foodList.map（（x，i）=>(

{" "}
{x.recipe}{x.ingrediens}
{

))}

);
};

您可能想在

handleClick

函数中调用

setFoodList

函数。这个问题也有帮助：您可能想在

handleClick

函数中调用

setFoodList

函数。这个问题也有助于：