时间戳

首页 > 解决方案 > 当数组的值改变时如何更新 UI

javascript - 当数组的值改变时如何更新 UI

问题描述

我通过迭代skidList 数组来显示每个skid 的名称。
我还提供了一个按钮“复制”，单击时调用 insertSkid 和调用 deleteSkid 的“删除”。
在 insertSkid 中，我正在更新 skidList 数组。
但是，Modal.Body 不会在对 skidList 数组进行更改时更新 Skid 名称。
这是我的代码。

   const CreateNewTab = () => {
             const [skidList, setSkidList] = useState([]);
                 let newSkid = {};
                 newSkid[name] = "PEN";
                 let newSkidList = [];
                 newSkidList.push(newSkid);
                 setSkidList(newSkidList);
    
            const insertSkid = skid => {
                let newSkidList = skidList;
                newSkidList.push(skid);
                setSkidList(newSkidList);
                console.log("Added New Skid" + skidList.length);
            };
    
            const deleteSkid = (index) => { setSkidList([...skidList.splice(index, 1)]); }

            return (
               <Modal
                backdrop="static"
                show={true}
                centered
                dialogClassName={"createnewskid-modal"}
              >
                <Modal.Body>
                                  {skidList.flatMap((skid, index) => (
                                      <div>
                                          {skid[name]}
                                          <Button onClick={insertSkid.bind(this,skid)}>copy</Button>
<Button onClick={()=> deleteSkid(index)}>delete</Button>
                                          <Divider />
                                      </div>
                    ))}
                </Modal.Body>
                </Modal>
              )
          }

标签： javascriptreactjsantd

解决方案

您提供的代码存在几个问题。如前所述，useEffect() 钩子在此处用于处理skid 数组的初始化：

useEffect(()=>{
    let newSkid = {name: "PEN"};
    setSkidList([...skidList, newSkid])
},[]) 
// The empty array second param tells the component to only execute the above code once on mount

注意：这里使用扩展运算符 (...) 来生成一个基于我们附加 newSkid 的skidList 的新列表。

接下来，您应该使用刚刚描述的相同方法在 insertSkid 函数中更新您的列表：

const insertSkid = (skid) =>{
    setSkidList([...skidList, skid])
}

最后，我建议不要绑定你的函数，而是在 onclick 道具中使用匿名函数：

onClick = {() => insertSkid(skid)}

推荐阅读