Question

React hooks useState 与 props 解构失败

2019-11-26

5246

javascript reactjs

我正在使用 React hooks，并尝试使用传递的 props 设置组件内常量的初始状态。我在网上看到过多个此类示例，但当我这样做时，数组解构会返回整个 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;

我假设，使用对象/数组解构， date 的值将自动分配来自 props 的值（字符串 "2019-11-26" ），而不是整个 props 对象。我遗漏了什么？我可以通过设置 const [date, setDate] = useState(props.date) 来解决这个问题，但这会破坏 eslints react 插件的解构规则，所以我想避免它。

编辑

感谢 helloitsjoe 提供的答案解决了我的问题！

Answer 1

您可以在参数定义中解构 props。请注意，如果您要从 props 设置状态，则最佳做法是将 prop 命名为 initialX 或 defaultX ，以指示它正在状态中设置，并且从那时起应该使用该状态。

const MyComponent = ({ initialDate }) => {
  const [date, setDate] = useState(initialDate);

  ...
}

Answer 2

您需要像这样解构 props ：

const MyComponent = ({date, task}) => {
   const [myDate, setMyDate] = useState(date);
  console.log(myDate); //get the date here
}

Answer 3

您可以这样做：

Import React, {useState} from "react";

const MyComponent = (props) => {
   const {date} = props //destructing
   console.log(props) // {date: "2019-11-26", task: "cooking"}
   const [date, setDate] = useState(date);
   console.log(date) 
   return (...)
}

export default MyComponent;

或

Import React, {useState} from "react";

    const MyComponent = ({date}) => { //destructing
       const [date, setDate] = useState(date);
       console.log(date) 

       return (...)
    }

    export default MyComponent;