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

Question

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

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

我想通过传递给组件的道具的值来初始化那个 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 prop 并且 Sym 组件使用 constructor 中的 this.props.activeSym 初始化状态。是否有任何解决方法可以在功能组件中实现相同的功能？

Answer 1

如下：

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

  return (
     /* ... */
  )
}

Answer 2

首先你可以从道具定义它（如果道具存在）：

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

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

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

Answer 3

是的，功能组件也可以做到这一点！你只需要添加 useEffect 来监听 prop change 以使用 prop value

初始化状态

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

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

  return <div>{val}</div>;
};

正在附加沙箱link

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

Answer 4

您可以通过两种方式更改状态：

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

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

在构造函数中初始化状态 一种方法是在构造函数中初始化状态。正如我们之前讨论的，当 React 实例化 class 时，构造函数是第一个被调用的方法。这是初始化组件状态的最佳位置，因为构造函数在 React 渲染组件之前被调用 UI.

class WithConstructor {
   
  constructor() {
   this.state = {
     name: "Whosebug"
    }
  }
}

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

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

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

How to initialize the react functional component state from props

state

initialization

prop

reactjs

react-hooks