reactjs - react - componentWillReceiveProps 未运行

所以我是新手，想知道如何创建一个传递几个参数的页面并根据这些参数获取文档。但是，当我尝试使用 componentWillReceiveProps 时，我发现它没有运行，我不知道为什么。那么有人可以用最简单的术语解释什么是 componentWillReceiveProps ，它何时运行及其目的？我花了很多时间试图阅读 react 页面，但所有这些对我来说似乎都是一种全新的语言，因为我最近才开始 react。您还可以编辑下面的代码以使其有效吗，我可以亲眼看看它是如何与其他东西一起工作的(当我亲眼看到它时，它可以帮助我更好地理解)。

下面是我的页面的代码:

import React from "react";
import { Tracker } from "meteor/tracker";
import { Link } from "react-router-dom"

import Menu from "./Menu"
import { Notes } from "../methods/methods";

export default class fullSize extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      doc: {}
    };
  }
  componentwillMount() {
    Meteor.subscribe("notes");
  }
  componentWillReceiveProps(nextProps) {
    this.tracker = Tracker.autorun(() => {
      const doc = Notes.findOne(nextProps.match.params.noteId);
      this.setState({ doc })
    })
  }
  renderNote(){
    console.log(this.state.doc)
  }
  render(){
    return (
      <div>{this.renderNote()}</div>
    )
  }
}

是不是因为我试图在有任何东西之前呈现状态？感觉就像我......这至少是我的猜测，因为我得到了一个空对象作为文档状态。

最佳答案

基本概念是我们有这些类型的生命周期方法:

1- 安装方法:(该组件的生命周期只会被调用一次)

2-更新方法:(每当组件中发生任何更新时都会被调用)

3-卸载方法:(当组件卸载时)
componentWillReceiveProps 是一个更新方法，只有在 props 值发生任何变化时才会运行，它不会在初始渲染时运行，因此您需要同时使用 componentWillReceiveProps 和 componentDidMount 方法。 componentDidMount 将获取初始数据，如果该页面接收到新的 props，那么 componentWillReceiveProps 将获取新数据。

componentWillReceiveProps :



componentDidMount :



像这样写:

export default class fullSize extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      doc: {}
    };
  }

  componentwillMount() {
    Meteor.subscribe("notes");
  }

  componentDidMount() {
    this.tracker = Tracker.autorun(() => {
      const doc = Notes.findOne(this.props.match.params.noteId);
      this.setState({ doc })
    })
  }

  componentWillReceiveProps(nextProps) {
    if(this.props.match.params.noteId != nextProps.match.params.noteId)
      this.tracker = Tracker.autorun(() => {
        const doc = Notes.findOne(nextProps.match.params.noteId);
        this.setState({ doc })
      })
  }

  renderNote(){
    console.log(this.state.doc)
  }

  render(){
    return (
      <div>{this.renderNote()}</div>
    )
  }
}

关于reactjs - react - componentWillReceiveProps 未运行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45901625/