Question

我是React的新手，所以很可能会有更好的方法来解决我想要做的事情。

我正在使用React和Redux在点击按钮时从JSON文件中提取HTML片段并将其插入到TemplateContent组件中。

我遇到的问题是，如果我在行中单击两次按钮，我希望将代码段插入两次但是因为我通过检查nextProps和this.props不匹配来阻止componentWillReceiveProps中的循环它不起作用，我到目前为止找不到它的方式我还不是很幸运。

这是我的代码......

class TemplateContentContainer extends Component {
    constructor() {
        super()

        this.fetchModule = this.fetchModule.bind(this)
        this.removeModule = this.removeModule.bind(this)
    }

    componentWillReceiveProps(nextProps) {
        if(nextProps.addedModule !== this.props.addedModule) // prevent infinite loop
        this.fetchModule(nextProps.addedModule)
    }

    fetchModule(id) {
        api
            .getModule(id)
            .then((module) => {
                this.props.dispatch(actions.receiveModule(module))
            })
            .catch((err) => {
                console.log('TemplateContainer Error: ' + err)
            })
    }

    removeModule(module) {
        this.dispatch(actions.removeModule(module))
    }

    render() {
        return (
            <TemplateContent
                templateModules={this.props.templateModules}
                removeModule={this.removeModule}
            />
        )
    }
}

const mapStateToProps = (state) => ({
    templateModules: state.receiveModuleById,
    addedModule: state.addModuleById, //returns id of added module - add me clicked
})

const mapDispatchToProps = (dispatch) => ({
    dispatch
})

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withRouter(TemplateContentContainer))

如果您需要任何其他代码或进一步解释我正在努力实现的目标，请告诉我。

任何帮助都将受到高度赞赏！：）

Answer 1

如果您对多个模块没问题，我建议您不要将它作为重新渲染的条件。你可以随时使用虚拟道具来改变自己的喜好，因为你正在使用不会出现问题的redux。

通过点击，dispatch({ type: INCREMENT })调度操作并使用与该操作匹配的reducer，添加++ int或任何随机的操作都可以。

然后你必须使用它作为nextProps的条件

mapStateToProps = ({ counter }) => ({ ...counter })

nextProps.counter !== this.props.counter

并且我认为你已经完成了。

Answer 2

试试这个条件：

componentWillReceiveProps(nextProps) {
    if(nextProps.templateModules !== this.props.templateModules)
    this.fetchModule(nextProps.addedModule)
}

Reactjs - 按钮单击时的componentWillReceiveProps - 按钮单击两次时失败

2 个答案: