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

【问题标题】：How to initialize the react functional component state from props如何从 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 您的解决方案运行良好。您可以发布描述性答案以供将来参考。我会接受的。谢谢

标签： reactjs initialization state react-hooks prop

【解决方案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: "StackOverflow"
    }
  }
}

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

class WithoutConstructor {
   
  state = {
   name: "StackOverflow"
  }
}

【讨论】：