Question

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

的功能

当我运行代码时，它会在Chrome中发出警告，

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

APP组件

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，一个函数。

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

1 个答案: