Question

我将React挂钩用于应用程序状态，我想知道如何使用props初始化功能组件状态？ useState钩子文档说出了类似的定义，

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

我想通过传递给组件的prop的值来初始化那个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来初始化状态。在功能组件上有什么解决方法可以实现相同的目的？

Answer 1

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

Answer 2

只需如下：

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

  return (
     /* ... */
  )
}

Answer 3

首先，您可以从道具中定义它（如果道具存在的话）：

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

然后，当prop没有立即提供值时（呈现组件时），您可以更新此值：

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

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

3 个答案: