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

Question

我是个新来的反应者，不懂什么。我有两个组件：父函数组件和子类组件。假设，从FC我需要从useState钩子传递非常简单的数组。当构造函数中的类内组件尝试注销道具时，结果是空数组。但在组件中成功渲染数组项。如果我不使用-useState钩子并将现有的array-console.log（props）结果传递给该数组。为什么会这样？我认为它与异步操作有关，但如果需要在基于props的构造函数中定义初始状态呢？因为道具没有定义，我不能做。你能帮我弄清楚吗

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

Answer 1

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

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

Answer 2

您可以看到类组件如何呈现正确的数据，但console.log输出并不适用于它们。这是因为创建和更改状态是异步操作。要查看道具是如何更改的，您必须为FC使用use效应，为类组件使用组件didUpdate。

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))

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