[英]React hooks useState with props destructuring fails
I'm using React hooks and trying to set the initial state of a constant inside a component with the passed down props
.我正在使用 React 钩子并尝试使用传递下来的
props
设置组件内常量的初始状态。 I've seen multiple examples of this online , but when I do it, the array destructuring returns the whole props
object, not the instance I want.我在网上看到了多个这样的例子,但是当我这样做时,数组解构返回整个
props
对象,而不是我想要的实例。
Import React, {useState} from "react";
const MyComponent = (props) => {
console.log(props) // {date: "2019-11-26", task: "cooking"}
const [date, setDate] = useState(props);
console.log(date) // {date: "2019-11-26, task: "cooking"}
return (...)
}
export default MyComponent;
I'd assume that with object/array destructuring the value of date
would automatically be assigned the value from props
(the string "2019-11-26"
), not the whole props
object.我假设通过对象/数组解构
date
的值将自动分配来自props
的值(字符串"2019-11-26"
),而不是整个props
对象。 What am I missing?我错过了什么? I can get around this by setting
const [date, setDate] = useState(props.date)
but that breaks eslints react plugins destructuring rule and I'd like to avoid it.我可以通过设置
const [date, setDate] = useState(props.date)
来解决这个问题,但这破坏了 eslints react 插件解构规则,我想避免它。
Edit编辑
Thanks to helloitsjoe for an answer that solves my problem!感谢helloitsjoe的答案解决了我的问题!
I'm using React hooks and trying to set the initial state of a constant inside a component with the passed down props
.我正在使用React钩子,并尝试使用传递的
props
设置组件内部常量的初始状态。 I've seen multiple examples of this online , but when I do it, the array destructuring returns the whole props
object, not the instance I want.我在网上看到了多个示例,但是当我这样做时,数组解构将返回整个
props
对象,而不是我想要的实例。
Import React, {useState} from "react";
const MyComponent = (props) => {
console.log(props) // {date: "2019-11-26", task: "cooking"}
const [date, setDate] = useState(props);
console.log(date) // {date: "2019-11-26, task: "cooking"}
return (...)
}
export default MyComponent;
I'd assume that with object/array destructuring the value of date
would automatically be assigned the value from props
(the string "2019-11-26"
), not the whole props
object.我假设通过销毁对象/数组来构造
date
的值,那么会自动为props
(字符串"2019-11-26"
)分配值,而不是整个props
对象。 What am I missing?我想念什么? I can get around this by setting
const [date, setDate] = useState(props.date)
but that breaks eslints react plugins destructuring rule and I'd like to avoid it.我可以通过设置
const [date, setDate] = useState(props.date)
来解决此问题,但这会破坏eslints react插件的分解规则,我想避免使用它。
Edit编辑
Thanks to helloitsjoe for an answer that solves my problem!感谢helloitsjoe的答案可以解决我的问题!
I'm using React hooks and trying to set the initial state of a constant inside a component with the passed down props
.我正在使用React钩子,并尝试使用传递的
props
设置组件内部常量的初始状态。 I've seen multiple examples of this online , but when I do it, the array destructuring returns the whole props
object, not the instance I want.我在网上看到了多个示例,但是当我这样做时,数组解构将返回整个
props
对象,而不是我想要的实例。
Import React, {useState} from "react";
const MyComponent = (props) => {
console.log(props) // {date: "2019-11-26", task: "cooking"}
const [date, setDate] = useState(props);
console.log(date) // {date: "2019-11-26, task: "cooking"}
return (...)
}
export default MyComponent;
I'd assume that with object/array destructuring the value of date
would automatically be assigned the value from props
(the string "2019-11-26"
), not the whole props
object.我假设通过销毁对象/数组来构造
date
的值,那么会自动为props
(字符串"2019-11-26"
)分配值,而不是整个props
对象。 What am I missing?我想念什么? I can get around this by setting
const [date, setDate] = useState(props.date)
but that breaks eslints react plugins destructuring rule and I'd like to avoid it.我可以通过设置
const [date, setDate] = useState(props.date)
来解决此问题,但这会破坏eslints react插件的分解规则,我想避免使用它。
Edit编辑
Thanks to helloitsjoe for an answer that solves my problem!感谢helloitsjoe的答案可以解决我的问题!
I'm using React hooks and trying to set the initial state of a constant inside a component with the passed down props
.我正在使用React钩子,并尝试使用传递的
props
设置组件内部常量的初始状态。 I've seen multiple examples of this online , but when I do it, the array destructuring returns the whole props
object, not the instance I want.我在网上看到了多个示例,但是当我这样做时,数组解构将返回整个
props
对象,而不是我想要的实例。
Import React, {useState} from "react";
const MyComponent = (props) => {
console.log(props) // {date: "2019-11-26", task: "cooking"}
const [date, setDate] = useState(props);
console.log(date) // {date: "2019-11-26, task: "cooking"}
return (...)
}
export default MyComponent;
I'd assume that with object/array destructuring the value of date
would automatically be assigned the value from props
(the string "2019-11-26"
), not the whole props
object.我假设通过销毁对象/数组来构造
date
的值,那么会自动为props
(字符串"2019-11-26"
)分配值,而不是整个props
对象。 What am I missing?我想念什么? I can get around this by setting
const [date, setDate] = useState(props.date)
but that breaks eslints react plugins destructuring rule and I'd like to avoid it.我可以通过设置
const [date, setDate] = useState(props.date)
来解决此问题,但这会破坏eslints react插件的分解规则,我想避免使用它。
Edit编辑
Thanks to helloitsjoe for an answer that solves my problem!感谢helloitsjoe的答案可以解决我的问题!
I'm using React hooks and trying to set the initial state of a constant inside a component with the passed down props
.我正在使用React钩子,并尝试使用传递的
props
设置组件内部常量的初始状态。 I've seen multiple examples of this online , but when I do it, the array destructuring returns the whole props
object, not the instance I want.我在网上看到了多个示例,但是当我这样做时,数组解构将返回整个
props
对象,而不是我想要的实例。
Import React, {useState} from "react";
const MyComponent = (props) => {
console.log(props) // {date: "2019-11-26", task: "cooking"}
const [date, setDate] = useState(props);
console.log(date) // {date: "2019-11-26, task: "cooking"}
return (...)
}
export default MyComponent;
I'd assume that with object/array destructuring the value of date
would automatically be assigned the value from props
(the string "2019-11-26"
), not the whole props
object.我假设通过销毁对象/数组来构造
date
的值,那么会自动为props
(字符串"2019-11-26"
)分配值,而不是整个props
对象。 What am I missing?我想念什么? I can get around this by setting
const [date, setDate] = useState(props.date)
but that breaks eslints react plugins destructuring rule and I'd like to avoid it.我可以通过设置
const [date, setDate] = useState(props.date)
来解决此问题,但这会破坏eslints react插件的分解规则,我想避免使用它。
Edit编辑
Thanks to helloitsjoe for an answer that solves my problem!感谢helloitsjoe的答案可以解决我的问题!
In case the date property is inside an object you should follow this approach:如果日期属性在对象内,您应该遵循以下方法:
import "./styles.css";
import React, { useState } from "react";
const basket = {
apples: 10,
banana: 5
};
const SimpleComp = () => {
const [{ apples, banana }, setBasket] = useState({ ...basket });
return (
<div>
<button
onClick={() =>
setBasket((currentState) => ({
...currentState,
apples: currentState.apples + 1,
banana: currentState.banana + 1
}))
}
>
Add Fruit
</button>
<div> Apples : {apples} </div>
<div> Banana : {banana} </div>
</div>
);
};
export default SimpleComp;
where to useState is been provided a copy of basket thus respecting immutability, try yourself code Sandbox在哪里 useState 被提供了一个篮子的副本,从而尊重不变性,试试自己的代码沙盒
or in case of simple date variable:或者在简单的日期变量的情况下:
import "./styles.css";
import React, { useState } from "react";
const actualDate = new Date()
const actualDateToday = actualDate.getDate()
console.log(actualDateToday);
const MyComponent = () => {
console.log(actualDate) // {date: "2019-11-26", task: "cooking"}
const [date, setDate] = useState(actualDateToday);
console.log(date) // {date: "2019-11-26, task: "cooking"}
return (
<div>
<p> Date Today: {actualDateToday} </p>
<button
onClick={() => setDate(date => date + 1)} >
Add a day
</button>
<p> Date Tomorrow: {date}</p>
</div>
);
}
export default MyComponent
try here code Sandbox在这里尝试代码沙盒
你需要做
const [date, setDate] = useState(props.date);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.