拼接如何在React的功能组件挂钩中工作？

编程问答 2022-06-12

问题描述

请帮助我了解这种情况。 根据胡克斯的说法：

当我们使用“ useState”声明一个状态变量时，它返回一对-包含两个项目的数组。第一项是当前值，第二项是功能，可让我们对其进行更新。

另一方面，无状态组件计算组件的内部状态，但没有更改状态的权限。 但在自爆示例中，我用splice和setData

更新了我的常量 
import React,{useState} from "react";
import "./style.css";

export default function App() {
const [data,setData] = useState([
  { name: "first",id: 1},{ name: "two",id: 2 }
]);
const addData = () => {
var newVal={ name: "Four",id: 4 };
data.splice(data.lenght,newVal);

setData([...data,{name:"three",id:3}]);

console.log(JSON.stringify(data))
};
return (
 <div>
   <ul>
     {data.map((item,index) => {
       return <li>{item.name} {index}</li>;
     })}
   </ul>
   <div onClick={()=>addData()} > add to list</div>
 </div>
);
}

我不明白，splice在函数组件（挂钩）中如何工作？ 那么为什么我们需要使用setData？

您可以在stackblitz.com上观看我的代码enter link description here 单击添加到列表时，两种方法都可以使用。

谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptreact-hooksreactjsreactjsreactjsreactjssetstatesetstatesplice