react const包含useImmer的setState之后未定义的内容

Question

我正试图将propsValue移动到新数组中。

我的代码中有两个按钮，第一个按钮(转换它们(执行传输。第二个按钮(全部打印(打印用户的每个键和值

然而，我的"；全部打印"；按钮在传输后打印未定义。

我应该如何修改代码以包含正确的值？

谢谢

import React from 'react';
import { useImmer } from "use-immer";
const UserImmer = () => {
const propsValue = [
{
value: "Name", key:"first_name"
},
{
value: "last Name", key:"last_name"
},
{
value: "E mail", key:"e_mail"
},
{
value: "Address", key: "address"
}
]
const [user, setUser] = useImmer({
value: '',
key: '',
})
const [users, setUsers] = useImmer([])
const onbuttonChange = () => {
//iteration begins
const name = "HAHA2";
propsValue.map(data =>  (

console.log("Iteration : ", data.value, " : ", data.key),

//save propsValue into user one by one
setUser(draft => {
draft.value =  data.value;
draft.key = data.key;
}),
//push user into Users
//
setUsers(draft => {
draft.push(user);
}),
//initialize the user
setUser(draft => {
draft.value = "";
draft.key = "";
})
))
}
const onClickUser = () => {
//prints final result of Users but it prtins four undefined
users.map(temp => console.log("THe Users: ", temp.value, " : " , temp.key));
}
return (
<div>

<button onClick={onClickUser}>print All</button>
<button onClick={onbuttonChange}>Convert them</button>
</div>
)
}
export default UserImmer;

Answer 1

这有很多问题。

第一。它的undefined是因为您试图显示它没有的数据。您想在console.log("THe Users: ", temp.name, " : ", temp.key))中通过temp.name显示属性name，但请查看对象结构-它没有属性name。它具有CCD_ 6和CCD_。所以这是第一个问题。

第二。来自钩子的变量user在所有map之后更新并重新渲染。也就是说，在map内部的整个时间内，user保持默认的user数据，也就是空数据。当数据更改后需要重新渲染组件时，应使用挂钩。因此，应该只创建一个变量，而不是使用钩子。

let user = {
value: "",
key: ""
};

而不是CCD_ 13

(user = data),

如果你愿意，它将从value更改为name，这是最简单的方式

(user = {
name: data.value,
key: data.key
}),

或者更好的是-删除用户！它没有任何作用。数据是相同的。它没有额外的功能性，反而占用了资源。

第三。推不动。

setUsers((draft) => {
draft.push(user);
})

您可以将其更改为users.push(user)，但users也不能是钩子。因此，当它发生更改时，将不会重新渲染组件。在您的情况下，这很好，因为数据只在单击另一个按钮后显示。但是，如果您希望在不单击print按钮的情况下显示数据，但在向其中添加数据时尽快显示，则需要使用挂钩，以便重新渲染。为此，创建一个新数组来存储所有"用户"，并在map结束时通过传递数组来运行setUsers。这样，组件就不必多次重新渲染。

此外，map应该返回一些内容。在您的情况下，propsValue.map不返回任何内容。我通过修复以下3件事重新制作了您的代码：https://codesandbox.io/s/vigorous-rubin-hh7t9?file=/src/App.js。它按你的意愿工作。

p.s.这也可以在不使用use-immer的情况下实现。在您的情况下，一个简单的反应useState也会起到同样的作用。