.push( ) 没有更新变量

Question

我正在尝试将使用 setData 函数设置的数据推送到 datas[ ]。我能够推送一次数据，但是第二次推送时，它没有存储在数据 [1] 中，而是替换了数据 [0]。我在这里做错了什么。提前谢谢你。

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

Answer 1

datas 数组添加到组件内部。每次组件re-renders，它是re-initialized到空数组。

此外，在回调函数的 onDayPress 属性上，您添加了一对额外的大括号

Answer 2

每当您更改状态时，

App 将得到 re-rendered，因此 const datas=[]; 将被初始化为一个新数组。

我可以预见的另一个问题是你调用 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 与设置器（setData 和 setName）一起使用。这些 setter 与 side-effects 无关。您应该在 useEffect.

中将状态值作为依赖项传递

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

Answer 3

在更新state的react中，react组件是re-rendered。因此，当您在 handlePress() 函数中更新状态时，您的组件是 re-rendered 。因此您的数据数组是 re-intialized 并再次变为空。所以每次当你推项目时，它都会添加到第一个位置。希望对你有帮助。

.push( ) 没有更新变量

.push( ) is not updating the variable

javascript

reactjs

react-native