Question

我正在使用React 16和Redux，我正在使用this.setState func onClick。但它无法正常工作。我试图调试几个小时，找不到任何解决方案。这是我的代码;

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class SSelect extends Component {
    state = {
        selectedName: '',
    }

    handleSelect = (id, name) => {
        this.setState({ selectedName: name });
        this.props.handleSelect(id); // this is redux action
    }

    render() {
        console.log(this.state.selectedName);
        return (
            <div>
                {
                    this.props.options.map(option => (
                        <div
                            key={option.id}
                            role="button"
                            onKeyPress={() => this.handleSelect(option.id, option.name)}
                            onClick={() => this.handleSelect(option.id, option.name)}
                            tabIndex="0"
                        >
                            {option.name}
                        </div>
                    ))
                }
            </div>
        );
    }
}

SSelect.propTypes = {
    handleSelect: PropTypes.func.isRequired,
    options: PropTypes.array.isRequired,
    segmentIndex: PropTypes.number,
};

SSelect.defaultProps = {
    segmentIndex: 0,
};

export default onClickOutside(SSelect);

console.log(this.state.selectedName);什么都不打印，如果我在列表中选择相同的选项，它会打印出真实的结果。选择新选项后，它会再次打印为空。

当我跟踪我的redux进程时，我发现它正在工作并设置新值以正确存储。当我删除我的redux动作时，console.log(this.state.selectedName);打印真值。

这是我的react和redux版本;

"react": "^16.2.0",
"react-redux": "^5.0.6",
"redux": "^3.7.2",

感谢您的帮助。

Answer 1

要以一种简单的方式解决此问题，您可以手动设置selectedName然后强行更新。

handleSelect(id, name) {
    this.state.selectedName=name;
   this.forceUpdate();
    this.props.handleSelect(id);
}

to redux setState
handleSelect(id,name){ this.setState({ selectedName: name }) };

onClick={this.handleSelect.bind(this,option.id, option.name)}

Answer 2

除非我的眼睛欺骗了我，否则你已将handleSelect定义为类方法而不是实例方法，这意味着您定义的this函数内的handleSelect未引用你的组件。

您应该将其定义为：

handleSelect(id, name) {
    this.setState({ selectedName: name });
    this.props.handleSelect(id); // this is redux action
}

而不是：

handleSelect = (id, name) => {
    this.setState({ selectedName: name });
    this.props.handleSelect(id); // this is redux action
}

Answer 3

我想你用connect()包裹组件？

据我所知，connect()默认情况下会使你成为pure组件（在redux术语中 - 仅限道具）。它可以在options的第四个connect参数中被覆盖。

然而，最有可能最好的解决办法就是摆脱内部状态，因为这就是我们使用redux的原因

[options]（Object）如果指定，则进一步自定义行为   连接器。除了可以通过的选项   connectAdvanced（）（见下文），connect（）接受这些   其他选项：

[pure]（Boolean）：如果为true，则connect（）将避免重新渲染和调用   如果相关，则mapStateToProps，mapDispatchToProps和mergeProps   state / props对象根据各自的相等性保持相等   检查。假设包装的组件是“纯”组件   不依赖于其道具和其他任何输入或状态   选择了Redux商店的州。默认值：true

https://github.com/reactjs/react-redux/blob/master/docs/api.md

Answer 4

这很奇怪，但我解决了这个问题。

在我的reducer上，我的密钥名称为segment。我将名称转换为selectedSegment并解决了问题。我认为segment字是保留的，但我找不到任何关于保留字的文档。

我将向react-redux打开一个问题

谢谢大家

this.setState无法正常工作

4 个答案: