Question

我对React比较新，想知道你是否可以在可能的情况下看看这个问题。我在点击事件上对API进行了ajax调用，并将结果存储在'SearchButtons'组件的状态中。

然后通过props将状态传递给子组件。但是，子组件（SearchForm）中的props等于父组件上的先前状态，并且在用户单击其中一个按钮时不会更新。

我想知道是否有解决方法，可能在将道具发送到子组件之前更新组件？

import React from 'react';
import SearchForm from './SearchForm'

class SearchButtons extends React.Component {
  constructor(){
    super();
    this.state = {
      data: {}
    }
  }

  update(event){
    $.ajax({
      url: 'http://example/api/' + event.target.value,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({ data: data })
      }.bind(this)
    });
  }

  render() {
    return (
      <div>
        <button type="button" value="people" onClick={this.update.bind(this)} className="btn btn-primary">People</button>
        <button type="button" value="car" onClick={this.update.bind(this)} className="btn btn-primary">Car</button>
        <button type="button" value="planet" onClick={this.update.bind(this)} className="btn btn-primary">Planet</button>
        <SearchForm data={this.state.data} />
      </div>
    )
  }
}

export default SearchButtons

请参阅下面SearchForm组件的示例

import React from 'react';

class SearchForm extends React.Component {

  componentWillReceiveProps(){
    console.log(this.props.data);
  }

  render(){
    return (
      <form className="form-inline">
        <div className="form-group">
          <label className="sr-only" for="exampleInputEmail3"></label>
          <input type="text" className="form-control" placeholder="Enter text..." />
        </div>
        <button type="submit" className="btn btn-default">Search</button>
      </form>
    )
  }
}

export default SearchForm

Answer 1

componentWillReceiveProps接收 next 道具作为第一个参数，因此通过记录this.state.props您会看到当前道具，而不是那些正在接受。

尝试记录下一个：

componentWillReceiveProps(nextProps){
    console.log(nextProps.data);
}

当然，您也可以通过调用componentDidUpdate生命周期方法而不是（或者如果您想要监控这两个步骤，同时更新后新的道具 ）componentWillReceiveProps：

componentDidUpdate(prevProps, prevState) { console.log(this.props.data); }

如果您想了解更多内容，请查看lifecycle methods！

Answer 2

好像你正确地做了事情，如果你从JSX中的道具中渲染一些数据，你会看到你想要的数据更新。

componentWillRecieveProps作为一种生命周期方法，其意义非常具有语义性，组件将获得道具但尚未获得道具。如果您记录this.props，您将看到旧的道具。记录下一个道具以查看更新

componentWillReceiveProps(nextProps) {
  console.log('new props: ', nextProps);
}

这是一篇非常好的文章，非常简洁地分解了组件生命周期的每个阶段，并向您展示了每种方法的工作原理：

http://busypeoples.github.io/post/react-component-lifecycle/

将更新状态作为道具

2 个答案: