Javascript 如何在数组值更改时更新UI

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

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

const CreateNewTab=（）=>{
const[skidList，setSkidList]=useState（[]）；
让newSkid={}；
报童[姓名]=“笔”；
让newSkidList=[]；
新闻儿童列表。推送（新闻儿童）；
设置儿童名单（新闻儿童名单）；
常数插入滑轨=滑轨=>{
let newSkidList=skidList；
新闻儿童名单。推（撬）；
设置儿童名单（新闻儿童名单）；
控制台日志（“添加的新撬块”+撬块列表长度）；
};
常量deleteskild=（索引）=>{setSkidList（[…skidList.splice（索引，1）]）；}
返回(
{skidList.flatMap（（滑动，索引）=>(
{skid[name]}
复制
deleteSkid（索引）}>delete
))}
)
}

如果要设置kidlist（新闻kidlist），请在useffect内执行

    const CreateNewTab = () => {
       const [skidList, setSkidList] = useState([]);
    
       useEffect(()=> {
        let newSkid = {};
        newSkid[name] = "PEN";
        setSkidList([newSkid]);
       }, [])
                    
         //...
    }

---

从useEffect块中调用setSkidList将导致多个状态更新，因为通过链接可以使用一个数组，并且对于React

skidList

，在

push

之后未更改。尝试：

const insertSkid=useCallback（（skid）=>{
设置撬块列表（[…撬块列表，skird]）；
}，[skidList]）；

您可以使用

useffect

进行初始数据加载，对于更新，您可以使用

prev

获取最后一个状态值并更新您的状态值并进行返回，无需添加更多变量赋值

const CreateNewTab=（）=>{
const[skidList，setSkidList]=useState（[]）；
useffect（（）=>{
const newSkid={[name]：“PEN”}；
设置基德列表（[新闻基德]）；
}, [])
常数插入滑轨=滑轨=>{
设置撬块列表（上一个=>[…上一个，撬块]）；
};
返回(
{skidList.flatMap（（滑动，索引）=>(
{skid[name]}
复制

))}
)
}

您演示的代码有几个问题。如前所述，useEffect（）钩子在这里用于处理滑动阵列的初始化：

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

注意：这里使用spread操作符（…）根据我们添加newSkid的skidList生成一个新列表

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

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

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

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

---

setskilist（[…newskilist]）此设置列表（newSkidList）将导致多个状态更新，请将此块移动到useEffect块。请提供链接以了解有关此更改的详细信息？然而，setskilist（[…newskilist]）；已完成。是否设置skidList（[…skidList，skird]）；将skird推送到skidList？什么是…skidList？
[…skidList，skird]
是一种ES6语法，返回一个新数组，其中包含来自
skidList
+
skird
项的项。有关从滑动底座列表阵列中移除滑动底座的扩展运算符的详细信息。我使用的是const removeSkid=（index）=>{setskilist（[…skidList.splice（index，1）]）；}这是从数组中移除滑动块的正确方法吗？要记住的最重要的一点是不要更改useState返回的数组。它应该保持不变（不变）。相反，您应该始终通过调用setskillist（）用新数组替换该数组。为了回答您的问题，slice修改了skidList数组本身，这打破了不变性的第一条规则。因此，您需要创建一个新数组并对其进行切片。（例如，让newList=[…滑动列表]；设置滑动列表（newList.splice（索引，1）））。希望这一切都有意义，祝你好运！