如何从 props 初始化反应功能组件状态

Posted 2023-02-22

【中文标题】如何从 props 初始化反应功能组件状态

【英文标题】：How to initialize the react functional component state from props

【发布时间】：2020-04-04 22:57:21

【问题描述】：

我正在使用 React 钩子来处理应用程序状态，我想知道如何使用 props 初始化功能组件状态？ useState 钩子文档说了一些明确的话，比如，

const [count, setCount] = useState(0);

我想通过传递给组件的 props 的值来初始化该 0 值。年长者，

import React from 'react';

export default class Sym extends React.Component

    constructor(props)
        super(props);
        this.state = 
            sym : [0,3,2,8,5,4,1,6],
            active: this.props.activeSym
        
        this.setActive = this.setActive.bind(this);
    

    setActive(itemIndex)
        this.setState(
            active: itemIndex
        );
    

    render()
        return (
             <div><h1> this.state.sym[this.state.active]</h1></div>
        );
    

工作正常。父组件通过activeSym 属性和Sym 组件使用this.props.activeSym 在constructor 中初始化状态。是否有任何解决方法可以在功能组件中实现相同的功能？

【问题讨论】：

const [count, setCount] = useState(props.activeSym);?

不需要调用超类构造函数？

它是一个功能组件，没有类或超类...

@jonrsharpe 您的解决方案运行良好。您可以发布描述性答案以供将来参考。我会接受的。谢谢

【参考方案1】：

如下：

const MyFunctionalComponent = (myProp) => 
  const [count, setCount] = useState(myProp)

  return (
     /* ... */
  )

【参考方案2】：

首先你可以从 props 中定义它（如果 prop 存在的话）：

const [count, setCount] = useState(activeSym);

然后你可以更新这个值，当 prop 没有值时（当组件渲染时）：

useEffect(() => 
  if (activeSym) 
    setCount(activeSym);
  
, [activeSym])

【讨论】：

为什么不立即有值？

【参考方案3】：

是的，这也可以通过功能组件实现！您只需要添加useEffect 来监听 prop 更改，以使用 prop 值初始化状态

export const newComponent = (props) => 
  const  path, value, info, update  = props;
  const [val, setVal] = useState(value);

  useEffect(() => 
    setVal(value);
  , [value]);

  return <div>val</div>;
;

附加沙盒链接

https://codesandbox.io/s/confident-agnesi-ohkq7?file=/src/MakeComponent.js

【参考方案4】：

有两种方法可以改变状态：

一个正在使用 this.state 和 另一个是this.setState。

我们在构造函数中使用第一种方法初始化状态，其余时间使用第二种方法。

在构造函数中初始化状态 一种方法是在构造函数中初始化状态。正如我们之前讨论的，构造函数是 React 实例化类时要调用的第一个方法。这是初始化组件状态的理想场所，因为在 React 在 UI 中呈现组件之前调用了构造函数。

class WithConstructor 
   
  constructor() 
   this.state = 
     name: "***"
    
  

在没有构造函数的情况下初始化状态 在 React 中初始化状态的另一种方法是使用 Class 属性。一旦类在内存中被实例化，类的所有属性都会被创建，以便我们可以在渲染函数中读取这些属性。

class WithoutConstructor 
   
  state = 
   name: "***"