GVKun编程网logo

每当收到道具时，componentWillRecieveProps会运行吗

29

想了解每当收到道具时，componentWillRecieveProps会运行吗的新动态吗？本文将为您提供详细的信息，此外，我们还将为您介绍关于com.intellij.openapi.compone

想了解每当收到道具时，componentWillRecieveProps会运行吗的新动态吗？本文将为您提供详细的信息，此外，我们还将为您介绍关于com.intellij.openapi.components.ProjectComponent的实例源码、componentDidMount 或 componentWillMount 在 React-Native 中不起作用？、componentWillReceiveProps不触发、componentWillRecieveProps方法无法正常运行：ReactJS的新知识。

本文目录一览：

每当收到道具时，componentWillRecieveProps会运行吗

每当收到道具时，componentWillRecieveProps会运行吗

我读阵营Facebook的文件和有它被写

组件接收新道具时调用。初始渲染不调用此方法。

但是在此链接的后面，已经解释了，即使道具相同，也将调用此方法，因为道具可以是引用，并且这些引用处的数据可能不同。

所以，我的问题是，每当我们收到新的道具时，它是否被调用。

答案1

小编典典

初始渲染表示第一次使用组件中的任何数据加载组件时。例如：

Parent    constructor() {            super();            this.state = {                viewData:undefined,            };    componentDidMount(){      let myData = yourStore.getData();      this.setState({viewData:myData})    }    updateView(){     let myData = yourStore.getData();      this.setState({viewData:myData})    }render()    {    return(      <div>         {      this.state.viewData && this.state.viewData.map(function (obj, index) {        return <childComponenet data={obj} key={index}/>       })        }             </div>     <button onClick={this.updateView.bind(this)>Update</button>}     )}

ChildComponent：

constructor() {        super();        this.state = {            childData:this.props.data            }        };//componentDidMount(){  //this.setState({childData:this.props.data}) }componentWillReceiveProps(newProps){   this.setState({childData:newProps.data})//this method will not get called first time}render(){   return(   <span>{this.state.childData}</span>   )}

构造函数仅初始化一次。因此，当第一次呈现子组件时，它将设置state变量。现在，当您单击父组件中的更新状态时，将state被更新，它将更新后的state形式传递props给子组件。在这种情况下，componentWillReceiveProps方法将被调用并更新子组件状态。

注意：componentWillReceiveProps不检查道具的内部价值。这意味着即使以前的道具和当前的道具相同，它也会起作用。因此，答案是
肯定的 。每当它从父母那里收到新的道具时，它将被调用。

com.intellij.openapi.components.ProjectComponent的实例源码

com.intellij.openapi.components.ProjectComponent的实例源码

项目：tools-idea    文件：IgnoredFilesTest.java    
@After
public void tearDown() throws Exception {
  UIUtil.invokeAndWaitIfNeeded(new Runnable() {
    @Override
    public void run() {
      try {
        myVcsManager.unregisterVcs(myVcs);
        myVcsManager = null;
        myVcs = null;

        ((ProjectComponent)mychangelistManager).projectClosed();
        ((ProjectComponent)myVcsDirtyScopeManager).projectClosed();

        tearDownProject();
        if (myTempDirFixture != null) {
          myTempDirFixture.tearDown();
          myTempDirFixture = null;
        }
        FileUtil.delete(myClientRoot);
      }
      catch (Exception e) {
        throw new RuntimeException(e);
      }
    }
  });
}
项目：intellij-ce-playground    文件：MockProject.java    
public void projectOpened() {
  final ProjectComponent[] components = getComponents(ProjectComponent.class);
  for (ProjectComponent component : components) {
    try {
      component.projectOpened();
    }
    catch (Throwable e) {
      LOG.error(component.toString(),e);
    }
  }
}
项目：intellij-ce-playground    文件：SnapShooterConfigurationExtension.java    
@Override
public void updateJavaParameters(runconfigurationBase configuration,JavaParameters params,RunnerSettings runnerSettings) {
  if (!isApplicableFor(configuration)) {
    return;
  }
  ApplicationConfiguration appConfiguration = (ApplicationConfiguration) configuration;
  SnapShooterConfigurationSettings settings = appConfiguration.getUserData(SnapShooterConfigurationSettings.SNAP_SHOOTER_KEY);
  if (settings == null) {
    settings = new SnapShooterConfigurationSettings();
    appConfiguration.putUserData(SnapShooterConfigurationSettings.SNAP_SHOOTER_KEY,settings);
  }
  if (appConfiguration.ENABLE_SWING_INSPECTOR) {
    settings.setLastPort(NetUtils.tryToFindAvailableSocketPort());
  }

  if (appConfiguration.ENABLE_SWING_INSPECTOR && settings.getLastPort() != -1) {
    params.getProgramParametersList().prepend(appConfiguration.MAIN_CLASS_NAME);
    params.getProgramParametersList().prepend(Integer.toString(settings.getLastPort()));
    // add +1 because idea_rt.jar will be added as the last entry to the classpath
    params.getProgramParametersList().prepend(Integer.toString(params.getClasspath().getPathList().size() + 1));
    Set<String> paths = new TreeSet<String>();
    paths.add(PathUtil.getJarPathForClass(SnapShooter.class));         // ui-designer-impl
    paths.add(PathUtil.getJarPathForClass(BaseComponent.class));       // appcore-api
    paths.add(PathUtil.getJarPathForClass(ProjectComponent.class));    // openapi
    paths.add(PathUtil.getJarPathForClass(LwComponent.class));         // UIDesignerCore
    paths.add(PathUtil.getJarPathForClass(GridConstraints.class));     // forms_rt
    paths.add(PathUtil.getJarPathForClass(PaletteGroup.class));        // openapi
    paths.add(PathUtil.getJarPathForClass(LafManagerListener.class));  // ui-impl
    paths.add(PathUtil.getJarPathForClass(DataProvider.class));        // action-system-openapi
    paths.add(PathUtil.getJarPathForClass(XmlStringUtil.class));       // idea
    paths.add(PathUtil.getJarPathForClass(Navigatable.class));         // pom
    paths.add(PathUtil.getJarPathForClass(AreaInstance.class));        // extensions
    paths.add(PathUtil.getJarPathForClass(Formlayout.class));          // jgoodies
    paths.addAll(PathManager.getUtilClasspath());
    for(String path: paths) {
      params.getClasspath().addFirst(path);
    }
    params.setMainClass("com.intellij.uiDesigner.snapShooter.SnapShooter");
  }
}
项目：fossil4idea    文件：BaseFossilTest.java    
protected void startChangeProvider() {
  ((StartupManagerImpl) StartupManager.getInstance(myProject)).runPostStartupActivities();
  mychangelistManager = changelistManager.getInstance(myProject);
  ((ProjectComponent) mychangelistManager).projectOpened();
  myDirtyScopeManager = VcsDirtyScopeManager.getInstance(myProject);
  ((ProjectComponent) myDirtyScopeManager).projectOpened();
  // mapping
  myVcsManager = ProjectLevelVcsManager.getInstance(myProject);
  myVcsManager.setDirectoryMappings(Collections.singletonList(new VcsDirectoryMapping(myBaseVf.getPath(),FossilVcs.NAME)));
}
项目：fossil4idea    文件：BaseTwoRootedFossilTest.java    
protected void startChangeProvider() {
  ((StartupManagerImpl) StartupManager.getInstance(myProject)).runPostStartupActivities();
  mychangelistManager = changelistManager.getInstance(myProject);
  ((ProjectComponent) mychangelistManager).projectOpened();
  myDirtyScopeManager = VcsDirtyScopeManager.getInstance(myProject);
  ((ProjectComponent) myDirtyScopeManager).projectOpened();
  // mapping
  myVcsManager = ProjectLevelVcsManager.getInstance(myProject);
  myVcsManager.setDirectoryMappings(Collections.singletonList(new VcsDirectoryMapping(myBaseVf.getPath(),FossilVcs.NAME)));
}
项目：tools-idea    文件：AbstractVcsTestCase.java    
protected void tearDownProject() throws Exception {
  if (myProject != null) {
    ((ProjectComponent) VcsDirtyScopeManager.getInstance(myProject)).projectClosed();
    ((ProjectComponent) changelistManager.getInstance(myProject)).projectClosed();
    ((changelistManagerImpl)changelistManager.getInstance(myProject)).stopEveryThingIfInTestMode();
    ((ProjectComponent)ProjectLevelVcsManager.getInstance(myProject)).projectClosed();
    myProject = null;
  }
  if (myProjectFixture != null) {
    myProjectFixture.tearDown();
    myProjectFixture = null;
  }
}
项目：tools-idea    文件：ProjectImpl.java    
private void projectOpened() {
  final ProjectComponent[] components = getComponents(ProjectComponent.class);
  for (ProjectComponent component : components) {
    try {
      component.projectOpened();
    }
    catch (Throwable e) {
      LOG.error(component.toString(),e);
    }
  }
}
项目：tools-idea    文件：ProjectImpl.java    
private void projectClosed() {
  List<ProjectComponent> components = new ArrayList<ProjectComponent>(Arrays.asList(getComponents(ProjectComponent.class)));
  Collections.reverse(components);
  for (ProjectComponent component : components) {
    try {
      component.projectClosed();
    }
    catch (Throwable e) {
      LOG.error(e);
    }
  }
}
项目：tools-idea    文件：MockProject.java    
public void projectOpened() {
  final ProjectComponent[] components = getComponents(ProjectComponent.class);
  for (ProjectComponent component : components) {
    try {
      component.projectOpened();
    }
    catch (Throwable e) {
      LOG.error(component.toString(),e);
    }
  }
}
项目：consulo    文件：AbstractVcsTestCase.java    
protected void tearDownProject() throws Exception {
  if (myProject != null) {
    ((ProjectComponent) VcsDirtyScopeManager.getInstance(myProject)).projectClosed();
    ((ProjectComponent) changelistManager.getInstance(myProject)).projectClosed();
    ((changelistManagerImpl)changelistManager.getInstance(myProject)).stopEveryThingIfInTestMode();
    ((ProjectComponent)ProjectLevelVcsManager.getInstance(myProject)).projectClosed();
    myProject = null;
  }
  if (myProjectFixture != null) {
    myProjectFixture.tearDown();
    myProjectFixture = null;
  }
}
项目：consulo    文件：ProjectImpl.java    
private void projectOpened() {
  final ProjectComponent[] components = getComponents(ProjectComponent.class);
  for (ProjectComponent component : components) {
    try {
      component.projectOpened();
    }
    catch (Throwable e) {
      LOG.error(component.toString(),e);
    }
  }
}
项目：consulo    文件：ProjectImpl.java    
private void projectClosed() {
  List<ProjectComponent> components = new ArrayList<ProjectComponent>(Arrays.asList(getComponents(ProjectComponent.class)));
  Collections.reverse(components);
  for (ProjectComponent component : components) {
    try {
      component.projectClosed();
    }
    catch (Throwable e) {
      LOG.error(e);
    }
  }
}
项目：consulo    文件：MockProject.java    
public void projectOpened() {
  final ProjectComponent[] components = getComponents(ProjectComponent.class);
  for (ProjectComponent component : components) {
    try {
      component.projectOpened();
    }
    catch (Throwable e) {
      LOG.error(component.toString(),e);
    }
  }
}
项目：tools-idea    文件：OrderEntryTest.java    
@Override
protected void tearDown() throws Exception {
  removeLibs();
  ((ProjectComponent)ModuleManager.getInstance(myProject)).projectClosed();
  super.tearDown();
}
项目：tools-idea    文件：SnapShooterConfigurationExtension.java    
@Override
public void updateJavaParameters(runconfigurationBase configuration,settings);
  }
  if (appConfiguration.ENABLE_SWING_INSPECTOR) {
    try {
      settings.setLastPort(NetUtils.findAvailableSocketPort());
    }
    catch(IOException ex) {
      settings.setLastPort(-1);
    }
  }

  if (appConfiguration.ENABLE_SWING_INSPECTOR && settings.getLastPort() != -1) {
    params.getProgramParametersList().prepend(appConfiguration.MAIN_CLASS_NAME);
    params.getProgramParametersList().prepend(Integer.toString(settings.getLastPort()));
    // add +1 because idea_rt.jar will be added as the last entry to the classpath
    params.getProgramParametersList().prepend(Integer.toString(params.getClasspath().getPathList().size() + 1));
    Set<String> paths = new TreeSet<String>();
    paths.add(PathUtil.getJarPathForClass(SnapShooter.class));         // ui-designer-impl
    paths.add(PathUtil.getJarPathForClass(BaseComponent.class));       // appcore-api
    paths.add(PathUtil.getJarPathForClass(ProjectComponent.class));    // openapi
    paths.add(PathUtil.getJarPathForClass(LwComponent.class));         // UIDesignerCore
    paths.add(PathUtil.getJarPathForClass(GridConstraints.class));     // forms_rt
    paths.add(PathUtil.getJarPathForClass(LafManagerListener.class));  // ui-impl
    paths.add(PathUtil.getJarPathForClass(DataProvider.class));        // action-system-openapi
    paths.add(PathUtil.getJarPathForClass(XmlStringUtil.class));       // idea
    paths.add(PathUtil.getJarPathForClass(Navigatable.class));         // pom
    paths.add(PathUtil.getJarPathForClass(AreaInstance.class));        // extensions
    paths.add(PathUtil.getJarPathForClass(Formlayout.class));          // jgoodies
    paths.addAll(PathManager.getUtilClasspath());
    for(String path: paths) {
      params.getClasspath().addFirst(path);
    }
    params.setMainClass("com.intellij.uiDesigner.snapShooter.SnapShooter");
  }
}
项目：tools-idea    文件：GitCucumberWorld.java    
@Before
@Order(0)
public void setUp() throws Throwable {
  PlatformTestCase.initPlatformlangPrefix();
  IdeaTestApplication.getInstance(null);

  String tempFileName = getClass().getName() + "-" + new Random().nextInt();
  myProjectFixture = IdeaTestFixtureFactory.getFixtureFactory().createFixtureBuilder(tempFileName).getFixture();

  edt(new ThrowableRunnable<Exception>() {
    @Override
    public void run() throws Exception {
      myProjectFixture.setUp();
    }
  });

  myProject = myProjectFixture.getProject();

  ((ProjectComponent)changelistManager.getInstance(myProject)).projectOpened();
  ((ProjectComponent)VcsDirtyScopeManager.getInstance(myProject)).projectOpened();

  myProjectRoot = myProject.getBasePath();
  myProjectDir = myProject.getBaseDir();
  myTestRoot = myProjectRoot;

  myPlatformFacade = ServiceManager.getService(myProject,GitPlatformFacade.class);
  myGit = ServiceManager.getService(myProject,Git.class);
  mySettings = myPlatformFacade.getSettings(myProject);
  mySettings.getAppSettings().setPathToGit(GitExecutor.GIT_EXECUTABLE);

  // dynamic overriding is used instead of making it in plugin.xml,// because MockVcsHelper is not ready to be a full featured implementation for all tests.
  myVcsHelper = overrideService(myProject,AbstractVcsHelper.class,MockVcsHelper.class);
  mychangelistManager = (changelistManagerImpl)myPlatformFacade.getchangelistManager(myProject);
  myNotificator = (TestNotificator)ServiceManager.getService(myProject,Notificator.class);
  myVcs = GitVcs.getInstance(myProject);

  virtualCommits = new GitTestVirtualCommitsHolder();
  myAsyncTasks = new ArrayList<Future>();

  cd(myProjectRoot);
  myRepository = GitTestUtil.createRepository(myProject,myProjectRoot);

  ProjectLevelVcsManagerImpl vcsManager = (ProjectLevelVcsManagerImpl)ProjectLevelVcsManager.getInstance(myProject);
  AbstractVcs vcs = vcsManager.findVcsByName("Git");
  Assert.assertEquals(1,vcsManager.getRootsUnderVcs(vcs).length);

  assumeSupportedGitVersion();
}
项目：consulo-ui-designer    文件：SnapShooterConfigurationExtension.java    
@Override
public void updateJavaParameters(runconfigurationBase configuration,OwnJavaParameters params,settings);
  }
  if (appConfiguration.ENABLE_SWING_INSPECTOR) {
    try {
      settings.setLastPort(NetUtils.findAvailableSocketPort());
    }
    catch(IOException ex) {
      settings.setLastPort(-1);
    }
  }

  if (appConfiguration.ENABLE_SWING_INSPECTOR && settings.getLastPort() != -1) {
    params.getProgramParametersList().prepend(appConfiguration.MAIN_CLASS_NAME);
    params.getProgramParametersList().prepend(Integer.toString(settings.getLastPort()));
    // add +1 because idea_rt.jar will be added as the last entry to the classpath
    params.getProgramParametersList().prepend(Integer.toString(params.getClasspath().getPathList().size() + 1));
    Set<String> paths = new TreeSet<String>();
    paths.add(PathUtil.getJarPathForClass(SnapShooter.class));         // ui-designer-impl
    paths.add(PathUtil.getJarPathForClass(BaseComponent.class));       // appcore-api
    paths.add(PathUtil.getJarPathForClass(ProjectComponent.class));    // openapi
    paths.add(PathUtil.getJarPathForClass(LwComponent.class));         // UIDesignerCore
    paths.add(PathUtil.getJarPathForClass(GridConstraints.class));     // forms_rt
    paths.add(PathUtil.getJarPathForClass(LafManagerListener.class));  // ui-impl
    paths.add(PathUtil.getJarPathForClass(DataProvider.class));        // action-system-openapi
    paths.add(PathUtil.getJarPathForClass(XmlStringUtil.class));       // idea
    paths.add(PathUtil.getJarPathForClass(Navigatable.class));         // pom
    paths.add(PathUtil.getJarPathForClass(AreaInstance.class));        // extensions
    paths.add(PathUtil.getJarPathForClass(Formlayout.class));          // jgoodies
    paths.addAll(PathManager.getUtilClasspath());
    for(String path: paths) {
      params.getClasspath().addFirst(path);
    }
    params.setMainClass("com.intellij.uiDesigner.snapShooter.SnapShooter");
  }
}
项目：consulo-java    文件：OrderEntryTest.java    
@Override
protected void tearDown() throws Exception {
  removeLibs();
  ((ProjectComponent)ModuleManager.getInstance(myProject)).projectClosed();
  super.tearDown();
}

componentDidMount 或 componentWillMount 在 React-Native 中不起作用？

componentDidMount 或 componentWillMount 在 React-Native 中不起作用？

componentDidMount 和 componentWillMount 仅适用于基于类的 React 组件；您在这里拥有的是一个功能组件。您可以使用 useEffect 钩子来完成相同的操作。

useEffect(() => {
  getWeather();
},[]);

注意 this 不存在于函数组件中；您可以在声明后直接调用该函数。

如果您之前没有使用过 useEffect，您可能对数组作为第二个参数有疑问。如果它为空，它将在 mount 上运行，并将运行您从 unmount 时的第一个参数返回的内容。如果您想再次运行您的效果，请在数组中添加一个依赖项。

,

ComponentDidMount 只能在类组件中工作。使用 useEffect React hook 可以毫无问题地达到相同的效果

componentWillReceiveProps不触发

componentWillReceiveProps不触发

在我的其他课程中，componentWillReceiveProps运行良好，但是由于某种原因，它在这里没有触发。

ItemView.jsx

class ItemView extends React.Component {    constructor(props) {        super(props);        this.state = {            name: null,             rating: null,             sector: null,             location: null,             description: null,             image: "blank.png",            show: false       };    }    ...    componentWillReceiveProps(nextProps) {        if(!nextProps.companyToRender) {            this.setState({                name: null,                 rating: null,                 sector: null,                 location: null,                 description: null,                 image: "blank.png",                show: false            });       }       else {           var companyToRender = nextProps.companyToRender;           this.setState({               name: companyToRender.name,                rating: companyToRender.rating,                sector: companyToRender.sector,                location: companyToRender.location,                description: companyToRender.description,                image: companyToRender.image,               show: true           });    }    ...    render () {       return(        <div>         ...        <CommentBox show={this.state.show} companyToRender={this.state.name}/>         ...        </div>       );    }}

CommentBox.jsx

class CommentBox extends React.Component {    constructor(props) {        super(props);        this.state = {companyToRender: null};    }    componentWillReceiveProps(nextProps) {        this.setState({companyToRender: nextProps.companyToRender});    }    ...}

如果不传递任何内容，则传递给itemView的prop为null，或者ItemView为其分配的数组。

仅当状态的属性为null时，componentWillReceiveProps（）才会触发，而当状态为null时，组件不会触发。（（null->条目）不起作用，但是（entry->
null）起作用）。

我错过了什么吗？谢谢！

-编辑：

（空->条目）更新状态，但不调用日志或任何后续componentWillRecieveProps（）。（但是输入-> null会。）

记录为null->条目

输入日志-> null

答案1

小编典典

经过大量痛苦的调试之后，我发现问题在于在某种模式（react-
bootstrap）内调用了ItemView，该模式出于某种原因不支持componentWillReceiveProps（）。最终通过重构代码解决了该问题。多谢你们！

componentWillRecieveProps方法无法正常运行：ReactJS

componentWillRecieveProps方法无法正常运行：ReactJS

以下子组件从其父组件接收道具。然后，使用将道具设置为自己的状态，getInitialState并使用将值渲染到相应的输入字段this.state。

我componentWillRecieveProps用来在子组件收到新道具时更新其状态。

最初，调用该组件时，它可以正常工作。问题是第二次通过道具时发生的，触发道具通过的相应按钮需要两次单击才能设置孩子的状态。

我可能使用componentWillRecieveProps不正确？

getInitialState: function() {  return {    pitch: this.props.booking.pitch,    email: this.props.booking.email,    firstName: this.props.booking.firstName,    arrivalDate: this.props.booking.arrivalDate,  }},componentWillReceiveProps: function (props) {  this.setState({    pitch: this.props.booking.pitch,    email: this.props.booking.email,    firstName: this.props.booking.firstName,    arrivalDate: this.props.booking.arrivalDate,  })},

完整代码：

var React = require(''react'');    var createReactClass = require(''create-react-class'');    var ViewBooking = createReactClass({      getInitialState: function() {        return {          pitch: this.props.booking.pitch,          email: this.props.booking.email,          firstName: this.props.booking.firstName,          arrivalDate: this.props.booking.arrivalDate,        }      },      componentWillReceiveProps: function (props) {        this.setState({          pitch: this.props.booking.pitch,          email: this.props.booking.email,          firstName: this.props.booking.firstName,          arrivalDate: this.props.booking.arrivalDate,        })      },      _handleInputChange: function(event) {        const target = event.target;        const value = target.type === ''checkbox'' ? target.checked : target.value;        const name = target.name;        var partialState = {};        partialState[name] = value;        console.log(partialState);        this.setState(partialState);      },      _handleUpdateClose: function(e) {        this.props.updateClose();        e.preventDefault();      },      _handleUpdateBooking: function (e) {        var tempBooking = {          pitch: this.state.pitch,          email: this.state.email,          firstName: this.state.firstName,          arrivalDate: this.state.arrivalDate,        }        this.props.updateBooking(tempBooking);        e.preventDefault();      },      _handleDelete: function (e) {        this.props.deleteBooking();        e.preventDefault();      },      render: function() {        if (this.props.viewFormVisibility) {                formVisibility = {"display": "block"};            } else {                formVisibility = {"display": "none"};            }        return (            <div>            <form style={formVisibility}>                <h4>View Booking</h4>                <div className="form-group row">                  <label className="col-2 col-form-label">Pitch</label>                  <div className="col-10">                    <input value={this.state.pitch} onChange={this._handleInputChange} className="form-control" name="pitch" ref="inputPitch" type="number" id="example-number-input"/>                  </div>                </div>              <div className="form-group row">                <label  className="col-2 col-form-label">First Name</label>                <div className="col-10">                  <input value={this.state.firstName} onChange={this._handleInputChange} className="form-control" ref="firstName" name="firstName" type="text" id="example-text-input"/>                </div>              </div>              <div className="form-group row">                <label className="col-2 col-form-label">Email</label>                <div className="col-10">                  <input value={this.state.email} onChange={this._handleInputChange} className="form-control" ref="inputEmail" type="email"  name="email" id="example-email-input"/>                </div>              </div>              <div className="form-group row">                <label className="col-2 col-form-label">Date</label>                <div className="col-10">                  <input value={this.state.arrivalDate} onChange={this._handleInputChange} className="form-control" ref="arrivalDate" name="arrivalDate" type="date" id="example-date-input"/>                </div>              </div>              <button type="submit" className="btn btn-primary" onClick={this._handleUpdateBooking}>Save changes</button>              <button className="btn btn-danger" onClick={this._handleUpdateClose}>Close</button>              <button onClick={this._handleDelete} className="btn btn-danger">Delete</button>            </form>          </div>        )      }    })    module.exports = ViewBooking;

答案1

小编典典

我可能会错误地使用componentWillRecieveProps？

是的，因为您需要使用props.keyname（支持传递给此方法的参数），而不是this.propsin
componentWillReceiveProps。

原因是，此lifecycle方法内部this.props将具有先前props值而不是新值，此lifecycle方法之后this.props将具有新props值。

根据DOC：

在已安装的组件接收新道具之前，将调用componentWillReceiveProps（）。如果您需要更新状态以响应道具更改（例如，将其重置），则可以比较this.props和nextProps并在此方法中使用this.setState（）执行状态转换。

这是因为componentWillReceiveProps将为每个setState内部父级调用，因此在设置newprops内部子级组件之前，我们应该先比较prev值和新值，可能是在父级内部某些其他state值已更改，而不是我们传递给子级组件的值。

做console.log对this.props和newProps和检查结果。

用这个：

componentWillReceiveProps: function (newProps) {    this.setState({        pitch: newProps.booking.pitch,        email: newProps.booking.email,        firstName: newProps.booking.firstName,        arrivalDate: newProps.booking.arrivalDate,    })    console.log(''previous value'', this.props);    //print the previous values    console.log(''new values'', newProps);          //new values},

关于每当收到道具时，componentWillRecieveProps会运行吗的问题我们已经讲解完毕，感谢您的阅读，如果还想了解更多关于com.intellij.openapi.components.ProjectComponent的实例源码、componentDidMount 或 componentWillMount 在 React-Native 中不起作用？、componentWillReceiveProps不触发、componentWillRecieveProps方法无法正常运行：ReactJS等相关内容，可以在本站寻找。

本文标签：

上一篇为什么Appbase在返回正确的项目之前会返回“ undefined”？

下一篇初始化本地安装的ESLint后，节点模块消失（eslint配置不生效）

相关文章