[英]Updating item by react useState hook
I am new to functional components in react and I have a problem with updating data.我是 react 功能组件的新手,我在更新数据时遇到了问题。 Here is my function that just sets actual data to a variable, finds the actual item and updates it.
这是我的 function ,它只是将实际数据设置为变量,找到实际项目并更新它。 The problem is that finds the actual item correctly but doesn't update the data.
问题是正确找到实际项目但不更新数据。 Data is just useState with an array of elements of course.
当然,数据只是带有元素数组的 useState。
const onEditElement = (elementId) => {
let elements = data;
let actualElement = elements.find((x) => x.id === elementId);
actualElement = { value: "newValue" };
setData(elements);
};
this is how data looks like:这是数据的样子:
const [data, setData] = useState([{id: 1, value: "initial"}]);
How can I solve this problem and what is causing it?我该如何解决这个问题,是什么原因造成的?
You are trying to update the elements array by changing the found object in the onEditElement()
function that this code doesn't work (read the mistake parts below to find out why this happening).您正在尝试通过更改在
onEditElement()
function 中找到的 object 来更新元素数组,该代码不起作用(阅读下面的错误部分以找出发生这种情况的原因)。
you should change the function like this:您应该像这样更改 function:
const onEditElement = (elementId) => {
let elements = [...data];
let currentElementIndex = elements.findIndex((x) => x.id === elementId);
if (currentElementIndex === -1) return;
elements[currentElementIndex] = { id: elementId, value: "newValue" };
// if you do elements[currentElementIndex].value = ... your data array will be mutated. then its better you do the way above
setData(elements);
};
Description描述
React Class Component
we were defining a state and we were updating that state using setState({ key: value })
.React Class Component
中,我们定义了一个 state,我们使用setState({ key: value })
更新了 state。 in the React Functional Component
we have a different approach.React Functional Component
中,我们有不同的方法。 we can have multiple useState
s and also we should update the whole thing when we use state setter.useState
,当我们使用 state 设置器时,我们应该更新整个事情。 then, if we have { key1: value1, key2: value2 }
and we want to change the key1's value.{ key1: value1, key2: value2 }
并且我们想要更改 key1 的值。 we should put { key1: newValue1, key2: value2 }
in the state setter.{ key1: newValue1, key2: value2 }
放入 state 设置器中。 we can do this with setData((prvData) => ({...prevData, key1: newValue1 }))
setData((prvData) => ({...prevData, key1: newValue1 }))
this.state
data key in the Class Component like this.state = { data: [] }
.this.state
数据键中的 Class 组件中有一个数组,例如this.state = { data: [] }
。 you should put whole array with updated items in the setState
function like setState({ data: WHOLE_ARRAY_WITH_UPDATED_ITEMS })
.setState
function 中,例如setState({ data: WHOLE_ARRAY_WITH_UPDATED_ITEMS })
。 also you should do this in Functional Component and do setData(WHOLE_ARRAY_WITH_UPDATED_ITEMS)
setData(WHOLE_ARRAY_WITH_UPDATED_ITEMS)
The Mistakes :错误:
data
array.data
数组。actualElement
and you are updating this variable and think it should change the elements array but it is an invidual object that has no connection to elements
array.actualElement
的新变量,并且您正在更新此变量并认为它应该更改元素数组,但它是一个与elements
数组没有连接的个人 object。 this variable is separated from elements array and changing it won't cause an effect on elements array.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.