React-router

Question

我刚刚开始将 react-router 集成到我的应用程序中，它运行得非常棒。但是，我确实有一个小问题。有一次我需要单击一个按钮，该按钮会更改为不同的页面，但还需要进行操作调用（转到服务器并获取要在 table 中显示的数据）。目前 react-router link 在动作之前触发，因此此时会破坏应用程序，因为没有数据可以映射！

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

当前代码块：

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;

哦，是的，我正在使用 material-ui，所以这可能无济于事！

如有任何帮助，我们将不胜感激

感谢您的宝贵时间

Answer 1

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

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

我更新了您的代码以展示它是如何工作的。如果您还有其他问题，请告诉我。

这里有一个 link 到 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 - Link 启动太快

React-router - Link firing too soon

reactjs

material-ui