我试图将使用setData函数设置的数据推送到data[].我可以推送数据一次,但第二次推送时,它取代了数据[0],而不是存储在数据[1]中.我做错了什么.

export default function App() {
 const [data,setData]= useState([]);
 const [activity, setActivity]= useState([])
 const [name, setName] = useState("")

 const datas=[];
 useEffect(()=>{
  // handlePress()
 }, [setData, setName])

 const rand= Math.floor(Math.random(1,5)*4)+1
 const events=["Event A","Event B","Event C","Event D","Event E"]

 const handlePress=(day)=>{
   setData(day);
   setName(`${events[rand]}`)
   datas.push(data);
   console.log(datas);
 }
  return (
    <div className="App">
      <Calendar 
        onDayPress={day => {
          {handlePress(day)}
        }}
        
      />
      
    </div>
  );
}

推荐答案

App将在每次更改状态时重新渲染,因此const datas=[];将被初始化为一个新array.

我可以预见的另一个问题是,在同一个函数上调用setData(day),然后调用datas.push(data),因为状态的更改是异步的,所以该函数不会应用于最新的数据

const handlePress=(day)=>{
   setData(day); //`day` is set here but not applied immediately
   setName(`${events[rand]}`)
   datas.push(data); //data is the previous data, not `day`
   console.log(datas);
 }

完整的修改可以是

const datas=[]; //move your `datas` to the global scope

export default function App() {
 const [data,setData]= useState([]);
 const [activity, setActivity]= useState([])
 const [name, setName] = useState("")

 
 useEffect(()=>{
  // handlePress()
 }, [setData, setName])

 const rand= Math.floor(Math.random(1,5)*4)+1
 const events=["Event A","Event B","Event C","Event D","Event E"]

 const handlePress=(day)=>{
   setData(day); //`data` will be changed later
   setName(`${events[rand]}`)
   datas.push(day); //push `day` directly instead of data
   console.log(datas);
 }
  return (
    <div className="App">
      <Calendar 
        onDayPress={day => {
          {handlePress(day)}
        }}
        
      />
      
    </div>
  );
}

您也不应该将useEffect与setter(setDatasetName)一起使用.这些二传者与副作用无关.您应该在useEffect中将状态值作为依赖项传递.

//whenever `name` or `data` change, `useEffect` will be triggered
useEffect(()=>{
  //TODO: Do your logic here
 }, [data, name])

Javascript相关问答推荐

如何粗体匹配的字母时输入搜索框使用javascript?

并不是所有的iframe都被更换

为什么useState触发具有相同值的呈现

优化Google Sheet脚本以将下拉菜单和公式添加到多行

无法使用单击按钮时的useState将数据从一个页面传递到另一个页面

WP Bootstrap NavWaker:下拉菜单一次打开所有下拉菜单

Puppeteer上每页的useProxy返回的不是函数/构造函数

是否可以在Photoshop CC中zoom 路径项?

向数组中的对象添加键而不改变原始变量

如何使用基于promise (非事件emits 器)的方法来传输数据?

AJAX POST在控制器中返回空(ASP.NET MVC)

Phaserjs-创建带有层纹理的精灵层以自定义外观

当从其他文件创建类实例时,为什么工作线程不工作?

使用jQuery find()获取元素的属性

有没有办法通过使用不同数组中的值进行排序

为什么在运行于<;img>;事件处理程序中的JavaScript中x和y是不可变的?

如何在移动设备中使用JAVASSCRIPT移除点击时的焦点/悬停状态

表单数据中未定义的数组键

如何在css中裁剪成一定Angular 的圆的一部分,而不需要复杂的多边形

如何在单击链接时设置一个JavaScript变量(以打开弹出窗口的特定部分)