如何从 props 初始化 React 函数组件状态

Question

我正在使用 React hooks 作为应用程序状态，我想知道如何使用 props 初始化函数组件状态？

useState

hook 文档说了一些明确的话，比如，

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

初始化状态。有什么解决方法可以在功能组件中实现相同的效果吗？

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

Answer 3

是的，你可以首先使用 props 定义状态：

const [name, setName] = useState(props.obj?.name);

然后如果状态仍然未定义意味着 props 没有值，那么：

useEffect(() => {
  if (JSON.stringify(props.obj) !== "{}") {
    setName(props.obj?.name);
  }
}, [props.obj])

Answer 4

如下：

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

  return (
     /* ... */
  )
}

Answer 5

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

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

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

riddhi 的这段代码可以是

export const newComponent = (props) => {
  const { path, value, info, update } = props;

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

由于 value prop 在父级的每次更新时都会发生变化，因此无需使用 useeffect 来更新它，特别是因为依赖项数组仅包含

value

请不要将 props 存储在 state 中，而是直接使用它们，因为当 state 未正确更新时，可能会导致稍后很难发现错误

Answer 6

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

1. 一个正在使用 this.state 并且
2. 另外一个是this.setState。

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

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

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

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

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