为什么我收到警告 - 函数作为 React 孩子无效。 .......？

Question

我正在学习各种生命周期组件，所以我的代码中有一个计数器，可以使用按钮增加或减少它，我有一个种子生成器，应该在按钮单击时调用它，它应该改变计数器的值种子，我添加了种子设置为Number.parseInt(Math.random() * 100)

的功能

当我运行代码时，它会在 chrome 中给出警告，

当我点击 increment 时，计数器设置为 () => this.setState({ seed: Number.parseInt(Math.random() * 100) })1 ，当我按下 decrement(click) 时，计数器设置为 NaN。 有一个与此警告相关的类似问题，但该代码与我的无关。

应用组件

import React from "react";
import Counter from "./Counter";
import "./App.css";
class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      mount: true,
      ignoreProp: 0,
      seed: 40
    };

    this.mountCounter = () => this.setState({ mount: true });
    this.unmountCounter = () => this.setState({ mount: false });

    this.ignoreProp = () => this.setState({ ignoreProp: Math.random() });
    this.seedGenerator = () =>
      this.setState({ seed: Number.parseInt(Math.random() * 100) });
  }

  render() {
    let counter = null;

    if (this.state.mount) {
      counter = (
        <Counter ignoreProp={this.state.ignoreProp} seed={this.seedGenerator} />
      );
    }

    return (
      <div className="App">
        <button onClick={this.mountCounter} disabled={this.state.mount}>
          Mount Counter
        </button>
        <button onClick={this.unmountCounter} disabled={!this.state.mount}>
          Unmount Counter
        </button>
        <button onClick={this.ignoreProp}>Ignore Prop</button>
        <button onClick={this.seedGenerator}>Generate seed</button>
        {counter}
      </div>
    );
  }
}

export default App;

反成分

import React from "react";

class Counter extends React.Component {
  constructor(props) {
    console.log("Constructor");
    super(props);
    this.state = {
      counter: 0,
      seed: 0
    };

    this.increment = () => this.setState({ counter: this.state.counter + 1 });
    this.decrement = () => this.setState({ counter: this.state.counter - 1 });
  }

  static getDerivedStateFromProps(props, state) {
    if (props.seed && state.seed !== props.seed) {
      return {
        seed: props.seed,
        counter: props.seed
      };
    }
    return null;
  }

  componentDidMount() {
    console.log("Component Did Mount");
    console.log("-------------------");
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (
      nextProps.ignoreProp &&
      this.props.ignoreProp !== nextProps.ignoreProp
    ) {
      console.log("Should Component Update- DO NOT RENDER");
      return false;
    }
    console.log("Should Component Update- RENDER");
    return true;
  }

  render() {
    console.log("Render");

    return (
      <div>
        <button onClick={this.increment}>Increment</button>
        <button onClick={this.decrement}>Decrement</button>
        <div className="counter">Counter: {this.state.counter}</div>
      </div>
    );
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("Component Did Update");
    console.log("--------------------");
  }

  componentWillUnmount() {
    console.log("Component Will Unmount");
    console.log("----------------------");
  }
}

export default Counter;

Answer 1

你将seedGenerator 函数作为seed 属性传递给Counter，因为你有

return {
    seed: props.seed,
    counter: props.seed
}

在getDerivedStateFromProps（可能是复制粘贴错字？）中，

Counter: {this.state.counter}

渲染片段尝试渲染seedGenerator，一个函数。