如何从 mapStateToProps 内部强制更新？

Question

我说的是connect 的mapStateToProps 参数。

我的一个组件有一个名为rules 的属性，它是一个函数数组。在mapStateToProps 中，我调用这些规则，传入当前状态。如果没有错误，规则会返回错误消息或 true。我将这些错误消息放入一个新的 prop 中，以便最终组件接收错误消息数组而不是函数数组。

到目前为止，这一直很好，但现在我想添加对异步规则的支持。我现在的计划是，每当规则返回 Promise 而不是错误字符串时，我会将“Checking...”之类的消息推送到错误消息数组中，但是一旦完成 Promise，我需要“刷新”这个数组并插入解析的消息。

我想如果我可以force an update，那么redux 将不得不再次调用mapStateToProps。在这种情况下，所有规则都将被重新评估，但如果我不小心，我会收到一个新的 Promise，它会立即恢复原状。 但是，如果我记住这些规则，那么我可以取回与以前相同的 Promise 实例，然后 check if it's settled 然后将该值放入我的错误数组中。

所以现在唯一的问题是弄清楚如何在 mapStateToProps 的上下文中获取对组件实例的引用，它只能访问当前状态和道具。

我的 Promise 解决后，有什么方法可以强制重新渲染？

或者，如果我可以dispatch 解决某个操作，我也可以使用它。

Answer 1

创建一个有状态的组件怎么样？如果您将 Promise 的结果保留在组件的状态中，一旦 Promise 解决，它将自动重新渲染组件。

import React, {Component} from 'react';
import {connect} from 'react-redux;
import Promise from 'promise';

class MyStatefulComponent extends Component {
    constructor(props) {
        this.state = {
            messages: [] // initialize empty, or with the synchronous rules
        };
    }

    componentWillMount() {
        const setState = this.setState;
        const rules = this.props.rules; // rules contains a list of either evaluated rules or promises
        Promise.all(rules).then(results => {
            // this is executed once all the promises in rules have resolved
            // setState will trigger a re-render of this component
            setState({
                messages: [] // construct your array of messages here from the results
            });
        })
    }

    render() {
        // render your list of messages
        return <ul>
            {this.state.messages.map(message => <li>{message}</li>)}
        </ul>;
    }
}

export default connect(
    (state, ownProps) => ({
        rules: ownProps.rules.map(rule => rule(state))
    })
)(MyStatefulComponent);

Answer 2

你不能在mapState 中这样做。 mapState 函数旨在完全同步。如果您需要异步执行某些操作，请在 mapState 之外触发，将一些值存储在 state 中，并使用结果更新它们以强制 mapState 重新运行。