Question

我必须使用数据呈现卡片列表。在第一步，我必须获取配置的ID列表。这个提取相对较快。然后在第二步中，我获取每个ID的详细信息。第二次获取相对较慢，因此每张具有详细信息的卡都有自己的spiner。

ID和详细信息来自不同的异步数据源。

这样做的最佳方法是什么？

我尝试使用容器的ComponentDidMount中的redux来获取ID列表。然后在每张卡的ComponentDidMount中，我开始获取每个ID的详细信息。这有效。

在状态对象中，我有一个对象，它包含所有这样的信息

uint32_t

问题是，如果我更改了account-map中的一个条目，则会重新呈现整个列表。

是否可以＆＃34;绑定＆＃34;每张卡都在props.accounts中拥有自己的条目？因此，只有在特定的详细信息发生变化时才重新呈现卡片？

这是列表的容器

```
{
   "accounts": {
        "id1": { "detailedInfo": "Datailed Info 1", fetching : false },
        "id2": { "detailedInfo": "Datailed Info 2", fetching : false },
        "id3": { "detailedInfo": "", fetching : true },
        ...
   },
   fetching : false,
   error : false
}
```

这是包含详细信息的组件

```
class BalancesContent extends React.Component {

    static propTypes = {
        dispatch: PropTypes.func,
        fetching: PropTypes.bool,
        getAccounts: PropTypes.func,
    };

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        if (this.props.accounts.accounts.length == 0) {
            this.props.getAccounts();
        }
    }

    onRefresh() {
        this.props.getAccounts();
    }

    setState(newState) {
        console.log("bc new state", newState);
        super.setState(newState);
    }

    render() {
        const userCards = this.props.accounts.accounts?Object.keys(this.props.accounts.accounts).map((acc) =>
            <UserBalancesCard
                key={acc}
                account={acc}
                refreshing={false}
                balances={null} />
        ):null;

        return (
            <Content padder
                refreshControl={
                    <RefreshControl
                        refreshing={this.props.accounts.fetching}
                        onRefresh={this.onRefresh.bind(this)}
                        title="Loading..."
                    />
                }>
                <BalancesSummary />        
                {userCards}        
            </Content>

        )
    }
}

const mapStateToProps = state => {
    return {
        accounts: state.accounts
    };
};

const mapDispatchToProps = dispatch => {
    return {
        getAccounts: () => dispatch(AccountsActions.accountsRequest()),
    };
};
```

Answer 1

将新列表映射到单个组件时，您可以更改这些组件的状态并再次开始渲染。例如，如果您有一个包含this.state.counter = 1的组件，并且您调用this.setState({counter: 1})，该组件将会重新呈现。要检查组件值是否已更改，您可以实现shouldComponentUpdate()方法：

https://reactjs.org/docs/react-component.html#shouldcomponentupdate

也许在您的UserBalanceCard组件中尝试此操作。

例如：

shouldComponentUpdate(nextProps, nextState) {
    if (nextProps.counter != this.props.counter) return true;
}

反应本机嵌套提取

1 个答案: