我花了很长时间阅读并尝试为我试图通过的数据工作。 问题是状态变量是一个数组类型,当我在同一个setState上执行setState时,componentWillReceiveProps没有正确的nextProps值。
这将使用搜索组件
呈现 var readOnlyTokens = ['ConnectionStatus = Down, Up'];
this.render = function () {
var self = this;
class SearchApp extends React.Component {
constructor(props) {
super(props);
this.state = {
value: [], // Issue with this variable
action: undefined
};
this.handleClick = this.handleClick.bind(this);
self.readonlySearchStatesAppInstance = this;
}
handleClick(e, value) {
console.log(value);
}
render() {
return (
<Search
id="readonly_modifyStates"
readOnly={true}
// value={readOnlyTokens.concat([])}
value={readOnlyTokens}
logicMenu={['OR']}
action={this.state.action}
/>
);
}
};
this.addReadOnlyTokens = function (tokens) {
// Value of tokens as ['Managed Status = InSync, OutSync']
this.readonlySearchStatesAppInstance.setState({value: tokens, action:"add"});
};
搜索组件
class Search extends React.Component {
componentWillReceiveProps(nextProps) {
// Issue here is nextProps.value is still having the initial render value ['ConnectionStatus = Down, Up'] instead of ['Managed Status = InSync, OutSync']
switch(nextProps.action){
case "add":
this.searchWidget.addTokens(nextProps.value);
break;
}
}
render() {
return (
<div className="search-component"
ref={el => this.el = el}>
{this.props.children}
</div>
);
}
在阅读了不同的答案后,我也试过了array.concat - 但是徒劳无功。
非常感谢任何帮助.. 感谢