误解反应。 FC与类组件交互答案

【问题标题】：Misunderstanding React. FC and class component interaction误解反应。 FC与类组件交互
【发布时间】：2020-12-11 04:29:21
【问题描述】：

我是 React 新手，有些东西不懂。我有两个组件：父功能组件和子类组件。假设，从 FC 我需要从 useState 钩子传递非常简单的数组。当在构造函数的类组件中时，我尝试注销道具 - 结果是空数组。但在组件中成功渲染数组项。如果我不使用 - useState 挂钩并传递现有数组 - console.log(props) 结果该数组。为什么会发生？我认为它与异步操作相关，但是如果需要根据道具在构造函数中定义初始状态怎么办？由于 props undefined ，我不能这样做。 Сan你帮我弄清楚

const FunctionalComponent = () => {
   const [state, setState] = useState([]);

   useEffect(() => {
      setState(['Jim', 'Bob', 'Tom']);
   }, []);

   return (
      <div>
         <ClassComponent names={state} />
      </div>
   );
}

// And class component

class ClassComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // Some state ...
    };

    console.log(props); --- // []

  }
  render() {
    const { names } = this.props;
    return <div>{names}</div>;  -- // renders items
  }
}

https://codesandbox.io/s/props-to-class-component-from-usestate-5z5k3?file=/src/index.js

【问题讨论】：

那可能是因为当你 console.log 它的状态是 [] 但是当数据改变时更新 dom 但不刷新整个组件

标签： reactjs react-hooks

【解决方案1】：

您可以看到类组件如何呈现正确的数据，但console.log 输出不参考它们。那是因为创建和更改状态是异步操作。要查看 props 是如何变化的，您必须对 FC 使用 useEffect，对类组件使用 componentDidUpdate。

class Counter extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidUpdate() {
    console.log(this.props.names)
  }
  render() {
    const { names } = this.props;
    return <div>{names}</div>;
  }
}

或者你可以将你的 console.log 放在渲染部分：

render() {
  console.log(this.props.names)
  const { names } = this.props;
  return <div>{names}</div>;
}

如果你想console.log类组件的新状态，使用回调函数作为setState的第二个参数，如下所示：

setState({counter: this.counter + 1}, ()=>console.log(counter))

否则，它会显示之前的状态值。

【讨论】：

感谢您的回答。现在我看到了区别。最佳实践是什么 - 如果我需要从道具初始化状态？

【解决方案2】：

您的初始状态是[]，由useState 定义。在此状态下，功能组件最初会被渲染，它还会以[] 作为初始道具渲染ClassComponent。这就是传递给构造函数的内容。

之后不再调用构造函数。相反，新的props 将只分配给组件。

【讨论】：