如何在数组类型状态的setState中推送数据?

Question

我有一个状态data。我想推入一个新条目

{  task:'ANy task',key:Math.random().toString() }

在使用setData.

我已经尝试了这里提到的许多方法，但不知道为什么不起作用。

这是我的代码。

import React, { useState } from "react";
import { StyleSheet, Text, View, TextInput, Button } from "react-native";
import { StatusBar } from "expo-status-bar";
const Addtask = ({navigation}) => {

const [data,setData] = useState([]);
console.log("from add = ",data)
const [task, setTask] = useState("");

const handleSubmit = () => {
console.log("submit pressed for task = ", task)

const updatedData = [...data,{
task:task,
key: Math.random().toString(),
}]
//here i am setting the data
setData(prevState => [...prevState,updatedData]);
console.log("data after adding task",data)

navigation.navigate("Tasklist",{data:data})
}
return (
<View style={styles.container}>
<StatusBar style="light" backgroundColor="midnightblue" />
<View>
<Text style={styles.text}>Add Task Here</Text>
</View>
<View>
<TextInput
style={styles.input}
onChangeText={setTask}
value={task}
onChange={setTask}
placeholder="Type your task"
keyboardType="ascii-capable"
/>
</View>
<View style={styles.buttoms}>
<View style={{margin:4}}>
<Button color={'red'} onPress={()=>{navigation.goBack()}} title="Cancel"></Button>
</View>
<View style={{margin:4}}>
<Button color={'lightblue'} onPress={()=>setTask('')} title="Clear"></Button>
</View>
<View style={{margin:4}}>
<Button color={'green'} onPress={handleSubmit} title="Save"></Button>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
.
.
.
});
export default Addtask;

为了调试，我使用了控制台stmts，它显示task值正确地进入handleSubmit()，但它没有被推送。

日志>

submit pressed for task =  Morning bike ride.
data after adding task Array []

Answer 1

因为你已经拥有

const updatedData = [...data,{
task:task,
key: Math.random().toString(),
}]

你不需要setData(prevState => [...prevState,updatedData])，你可以像setData(updatedData)一样将updatedData分配给setData

可以使用

setData(current => [...current, {
task:task,
key: Math.random().toString(),
}])

那么你不需要updatedData