Javascript 无法使用表单onSubmit React更新状态

我有一个包含组件列表的组件。我有一个初始cardlist，它作为我的组件中的列表填充。每次提交表单时，我都想添加一个新组件，但即使我的cardlist数组获得了一张新卡，我也无法更新它。我该怎么办

import { Card } from "./Card";

export function Body() {
    let imgname = "";
    let imgurl = "";

    let cardlist = [
        {
            name: "ca122t1",
            url: "https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg"
        },
        {
            name: "cat2",
            url: "https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg"
        }
    ]
    const [list, setList] = React.useState(cardlist);
    
    
    function handleName(event) {
        imgname = event.target.value;
    }

    function handleURL(event) {
        imgurl = event.target.value;
    }

    function handleSubmit(e) {
        let imgToAdd = {name: imgname, url: imgurl}
        cardlist.push(imgToAdd)
        setList(cardlist)
        e.preventDefault()
    }

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <label>Name</label>
                <input type="text" onChange={handleName}/>
                <label>Image URL</label>
                <input type="text" onChange={handleURL}/>
                <input type="submit" value="Submit"/>
            </form>
            <ul>
                {list.map((item) => (
                    <Card name={item.name} url={item.url}></Card>
                ))}
            </ul>
        </div>
    );
}

从“/Card”导入{Card}；
导出功能体（）{
让imgname=“”；
让imgurl=“”；
让卡片列表=[
{
名称：“ca122t1”，
url:“https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg"
},
{
名称：“cat2”，
url:“https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg"
}
]
const[list，setList]=React.useState（cardlist）；
函数handleName（事件）{
imgname=event.target.value；
}
功能手柄（事件）{
imgurl=event.target.value；
}
函数handleSubmit（e）{
让imgToAdd={name:imgname，url:imgurl}
卡片列表推送（imgToAdd）
设置列表（卡片列表）
e、 预防默认值（）
}
返回(
名称
图像URL

{list.map（（项）=>(
))}

);
}

切勿直接修改React中的状态。而是将旧数组的值复制到新数组中。此外，您应该使用旧状态（

list

），而不是仅用于初始化状态的

cardlist

变量。 在ES6中，您可以简单地执行以下操作

function handleSubmit(e) {
  // copy the elements of list into a new array and add the new card
  setList([...list, {name: imgname, url: imgurl}]);
  e.preventDefault();
}

编辑： 我刚才看到，您也没有对

imgname

和

imgurl

变量使用state，因此这个答案应该有效，但为新值填充空字符串。组件中的所有更改都应

useState

：

const [imgname, setImgname] = useState("");
function handleName(event){
  setImgname(event.target.value)
}

此外，对于受控输入，从状态设置值以避免不一致：

<input type="text" onChange={handleName} value={imgname} />

---

我花了将近一个小时试图弄明白这一点。非常感谢。