我正在创建一个小型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({})
并没有使用新的道具重新渲染组件。