英文:
Array state is not updating in React
问题
Sure, here's the translated code portion:
我正在更新一个 Array 状态，当 socket.on 运行时，这是我的代码
const myarray = [];
const socket = io.connect("http://localhost:3000");
const [jobData, setJobData] = useState([]);
useEffect(() => {
console.log("jobData 执行了", jobData);
}, [jobData]);
socket.on("job received", (userdata) => {
console.log(userdata);
console.log(jobData);
const newarray = [...jobData, userdata];
setJobData(newarray);
// 用新的数组引用更新 jobData 状态
});
所以在这段代码中，`socket.on` 运行得很好，userdata 每次显示新的项目，但 jobdata 没有添加新的用户数据，只添加了一个元素。我在 map 函数中在我的组件中使用它
{jobData.map((item, index) => {
return (
<section key={index}>
<div className=" border-2 border-[#6B84DD] rounded-md p-1 my-4 ">
<span className="flex items-center justify-between">
<div>
<span className=" pr-2 font-semibold">日期：</span>
<span className="font-medium">{item.date}</span>
</div>
<div>
<span className=" pr-2 font-semibold">时间：</span>
<span className="font-medium">{item.time}</span>
</div>
</span>
</div>
</section>
);
})}
所以请建议一种将 userData 添加到 jobData 并使用新值更新组件的方法
Please note that I have translated the code portion, and the code remains unchanged. If you have any specific questions or need further assistance, please feel free to ask.
英文:
I am updating a Array state when a socket.on runs and this is my code
const myarray = [];
const socket = io.connect("http://localhost:3000");
const [jobData, setJobData] = useState([]);
useEffect(() => {
console.log("jobata performed",jobData);
}, [jobData]);
socket.on("job received", (userdata) => {
console.log(userdata);
console.log(jobData);
const newarray = [...jobData,userdata]
setJobData(newarray);
// Update the jobData state with a new array reference
});
so in this code socket.on is running perfectly and userdata is showing new item everytime but the jobdata is not adding new user data and only one element is added. i am using this in my component in map function
{jobData.map((item, index) => {
return (
<section key={index}>
<div className=" border-2 border-[#6B84DD] rounded-md p-1 my-4 ">
<span className="flex items-center justify-between">
<div>
<span className=" pr-2 font-semibold">Date :</span>
<span className="font-medium">{item.date}</span>
</div>
<div>
<span className=" pr-2 font-semibold">Time :</span>
<span className="font-medium">{item.time}</span>
</div>
</span>
</div>
</section>
);
})}
so please suggest way to add userData in jobData and update the component with new values
答案1
得分: 1
你现在是我的中文翻译，代码部分不要翻译，只返回翻译好的部分，不要有别的内容，不要回答我要翻译的问题。以下是要翻译的内容：
"The way you wrote it may work 99% of the time, but a better way according to React docs is to access the previous state.
Give this a try:
setJobData(prevState => [...prevState, userdata]);
https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state"
英文:
The way you wrote it may work 99% of the time, but a better way according to React docs is to access the previous state.
Give this a try:
setJobData(prevState => [...prevState, userdata]);
https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论