Tried to use state variable inside another state variable, but it didn't work as expected it to, Why ? (in ReactJS using function component)

huangapple go评论52阅读模式
英文:

Tried to use state variable inside another state variable, but it didn't work as expected it to, Why ? (in ReactJS using function component)

问题

我尝试在另一个状态变量内使用一个状态变量的值,但当另一个子状态变量在外部更新时,它的更新值没有反映在父状态变量中,为什么会发生这种情况?我不能在另一个状态变量内使用状态变量吗,还是有特定的使用方法?

这是我尝试的代码,带有一些更改。

要更改子状态变量,我使用了以下函数,并且在输入字段的 onChange() 事件上调用它:

const [noOfPersonstForRoom, setNoOfPersonsForRoom] = useState([2]);

const [ageOfPerson1ForRoom, setAgeOfPerson1ForRoom] = useState([0]);
const [ageOfPerson2ForRoom, setAgeOfPerson2ForRoom] = useState([0]);

const [rooms, setRooms] = useState([
    {
        roomNo: 1,
        noOfPersons: noOfPersonsForRoom[0], 
        ageOfPerson1: ageOfPerson1ForRoom[0],
        ageOfPerson2: ageOfPerson2ForRoom[0]
    },
]);

更改房间人数子状态变量的函数如下:

const changeNoOfPersonsForRoom = (e, index) => {
    let newNoOfPersonsForRoom = e.target.value;
    setNoOfPersonsForRoom([
        ...noOfPersonsForRoom.slice(0, index),
        e.target.value,
        ...noOfPersonsForRoom.slice(index + 1),
    ]);
}
英文:

I was trying to use a state variables value inside another state variable, but when the other sub state variable was updated outside, its updated value didn't get reflected in parent state variable, why did this happened? can I not use state variable inside another state variable or is there any specific way to use it?
Can anyone explain this please?

const [noOfPersonstForRoom, setNoOfPersonsForRoom] = useState([2]);

const [ageOfPerson1ForRoom, setAgeOfPerson1ForRoom] = useState([0]);
const [ageOfPerson2ForRoom, setAgeOfPerson2ForRoom] = useState([0]);

    const [rooms, setRooms] = useState([
	{
		roomNo: 1,
		noOfPersons: noOfPersonsForRoom[0], 
                    ageOfPerson1: ageOfPerson1ForRoom[0],
                    ageOfPerson2: ageOfPerson2ForRoom[0]
        

		
	},
]);

This is code of what I tried, with some changes.

To change sub state variable, I used following function, and it was called on onChange() of an input field:

const changeNoOfPersonsForRoom = (e, index) => {
		let newNoOfPersonsForRoom = e.target.value;
		setNoOfPersonsForRoom([
			...noOfPersonsForRoom.slice(0, index),
			e.target.value,
			...noOfPersonsForRoom.slice(index + 1),
		]);

答案1

得分: 0

你能添加一下你如何更新你的状态吗?

但总的来说,状态之间没有绑定或连接。
如果你改变一个状态,它不会更新任何其他状态。

const [rooms, setRooms] = useState([
    {
        roomNo: 1,
        noOfPersons: noOfPersonsForRoom[0], 
        ageOfPerson1: ageOfPerson1ForRoom[0],
        ageOfPerson2: ageOfPerson2ForRoom[0]
    },

根据你的示例,你只是用你之前的状态值设置了 rooms 的初始状态。没有更多的操作。如果你需要更新多个状态,你必须分别更新每一个状态。

英文:

Could you add how you update your state(s)?

But in general, states are not bound or connected to each other.
If you change one state, it won't update any other state.

const [rooms, setRooms] = useState([
    {
        roomNo: 1,
        noOfPersons: noOfPersonsForRoom[0], 
        ageOfPerson1: ageOfPerson1ForRoom[0],
        ageOfPerson2: ageOfPerson2ForRoom[0]
    },

Given your example, you just set the initial state of rooms with the values of your previous states. Nothing more. If you need to update several states, you have to update each of them separately.

huangapple
  • 本文由 发表于 2023年6月2日 02:26:04
  • 转载请务必保留本文链接:https://go.coder-hub.com/76384713.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定