React重渲染组件

时间:2018-07-07 13:13:46

标签: javascript reactjs meteor

我正在创建一个小型React应用程序,并且在setState({})函数上遇到了问题。在我看来,setstate({})似乎没有用其他道具重新渲染该组件。

export default class datelist extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataListArray: [],
      currentState: "",
      dataArray: [],
      date: "",
      flag: false
    };
  }

  componentDidMount() {
    Tracker.autorun(() => {
      Meteor.subscribe("userEntries");
      Meteor.subscribe("dateEntries");
      let cursor = userEntries.find().fetch();
      if (cursor.length !== 0) {
        this.setState({
          dataArray: cursor
        });
      }
    });
  }

  renderData() {
    if (!(this.state.dataListArray.length === 0)) {
      console.log(this.state.dataListArray);
      return this.state.dataListArray[0].dates.map(function(date, index) {
        console.log(date, index);
        return <DateListItem key={index} date={date} />;
      });
    }
  }

  renderComponent(event) {
    console.log("Select Change");
    let date = event.target.value;
    this.setState({
      date: date,
      flag: true
    });
  }

  getCursor(event) {
    let cursor = dateEntries.find({ userId: Meteor.userId() }).fetch();
    this.setState({
      dataListArray: cursor,
      currentState: event.target.value
    });
    // render just the components that have the same date
  }

  render() {
    return (
      <div>
        <select
          onClick={this.getCursor.bind(this)}
          onChange={this.renderComponent.bind(this)}
        >
          {this.renderData()}
        </select>
        {/*<p>{this.state.currentState}</p>*/}
        {this.state.flag ? (
          <Datalist data={this.state.dataArray} date={this.state.date} />
        ) : (
          <span />
        )}
      </div>
    );
  }
}

状态flag的用途是确保以正确的日期值呈现Datalist组件。每次用户从选择框中选择新日期时,Datalist组件都应使用新的日期道具重新呈现。

就我而言,它仅渲染一次。我已经检查了renderComponent()函数,每次我在选择框中更改值时都会调用它,但是看来setState({})并没有使用新的道具重新渲染组件。

0 个答案:

没有答案