componentWillReceiveProps()中的nextProps没有获得状态数组prop的正确值

时间:2018-06-09 19:27:44

标签: javascript reactjs

我花了很长时间阅读并尝试为我试图通过的数据工作。 问题是状态变量是一个数组类型,当我在同一个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 - 但是徒劳无功。

非常感谢任何帮助.. 感谢

0 个答案:

没有答案