Question

我刚开始将react-router集成到我的应用程序中，它的工作就像一个魅力。但是，我确实有一个小问题。有一次，我需要点击一个按钮，该按钮会切换到另一个页面，但也需要进行一次动作调用（进入服务器并获取数据显示在表格中）。此时，react-router链接在操作之前触发，因此在此时断开应用程序，因为没有要映射的数据！

我的问题是如何更改这些事件发生的顺序，以便在更改页面时存储中存在数据（由操作更新）？

当前代码块：

import React from 'react';
import { Link } from 'react-router';
import List from 'material-ui/lib/lists/list';
import ListItem from 'material-ui/lib/lists/list-item';
import ActionInfo from 'material-ui/lib/svg-icons/action/info';
import { getTable } from '../../actions/DALIActions';
import TokenStore from '../../stores/TokenStore';
import TableStore from '../../stores/TableStore';

const styles = {
    root: {
        paddingTop: 200,
        width: '100%',
    },
    headerStyle: {
        textAlign: 'center',
    },
    container: {
        border: 'solid 1px #d9d9d9',
        height: 500,
        overflow: 'hidden',
    },
};

class MainTablePage extends React.Component {

    getTable(id) {
        getTable(TokenStore.getToken(), id);
    }

    addTables() {
        let tableArray = TableStore.getTables().objects;
        console.log(tableArray);
        let tableList = tableArray.map((el, i) => {
            return (
                <ListItem
                    key={i}
                    id={el.id}
                    primaryText={el.title}
                    leftIcon={<ActionInfo />}
                    containerElement={<Link to="/table" />}
                    linkButton={true}
                    onTouchTap={this.getTable.bind(this, el.id)} 
                />
            );
        });
        return tableList;
    }

    render() {
        return (
            <div>
                <div style={styles.headerStyle}>
                    <h1>Here are the current tables available</h1>
                </div>
                <div style={styles.root}>
                    <div style={styles.container}>
                        <List>
                            {this.addTables()}
                        </List>
                    </div>
                </div>
            </div>
        );
    }
}

export default MainTablePage;

哦，是的，我使用的是材料ui，这可能对你没什么帮助！

非常感谢任何帮助

感谢您的时间

Answer 1

在组件componentDidMount()内触发操作，并在商店中设置加载状态。

触发操作并发出请求时，将加载状态设置为true。获取数据后，将其设置为false。这样您就可以渲染加载器而不是依赖于尚未获取的数据的组件。

我更新了您的代码以显示它是如何工作的。如果您有任何疑问，请告诉我。

以下是React lifecycle methods的链接以获取更多信息。

class MainTablePage extends React.Component {
     componentDidMount() {
         // fire your action here
     }
     getTable(id) {
         getTable(TokenStore.getToken(), id);
     }

     addTables() {
        let tableArray = TableStore.getTables().objects;
        console.log(tableArray);
        let tableList = tableArray.map((el, i) => {
            return (
                <ListItem
                    key={i}
                    id={el.id}
                    primaryText={el.title}
                    leftIcon={<ActionInfo />}
                    containerElement={<Link to="/table" />}
                    linkButton={true}
                    onTouchTap={this.getTable.bind(this, el.id)} 
                />
            );
        });
        return tableList;
    }

    render() {
        const { loading } = this.props; // loading state from your store

        if (loading) {
            // return a loader component while your data is fetched
            return <Loader />;       
        }

        return (
            <div>
                <div style={styles.headerStyle}>
                    <h1>Here are the current tables available</h1>
                </div>
                <div style={styles.root}>
                    <div style={styles.container}>
                        <List>
                            {this.addTables()}
                        </List>
                    </div>
                </div>
            </div>
        );
    }
}

React-router - 链接发射太快

1 个答案: