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

Question

我正在使用 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>
        );
    }
}

工作正常。父组件传递activeSymprop 并且Sym组件使用this.props.activeSymin初始化状态 constructor 。是否有任何解决方法可以在功能组件中实现相同的功能？

Answer 1

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

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

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

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

Answer 2

是的，这也可以通过功能组件实现！您只需要添加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