Reactjs React JS，如何在两个页面中显示状态

我目前正在开发一个计分网站，用户可以给每个玩家打分。所有点数的总数都会计算出来，并显示在“管理员”页面上的计数器下方。现在我想要的是，我还想在一个不同的页面上显示总价值，在那里球员可以看到他们的球队得到了多少分。但此总值必须与管理员页面中的总值同步。我该怎么做？我听说过axios，但不知道它是如何工作的。有人能帮我吗

我的代码： 柜台 计数器

---

Axios是一个http客户端，因此它不适用于您的问题

你的问题有多种解决方案

选项1：回调

根据管理员和非管理员页面的结构/嵌套方式，此选项可能容易实现，也可能难以实现

您可以有一个父组件来保存所有计数器值数据，并呈现显示计数器的管理或非管理组件

class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            counters: [
                { id: 1, value: 0 },
                { id: 2, value: 0 },
                { id: 3, value: 0 },
                { id: 4, value: 0 },
                { id: 5, value: 0 }
            ],
            total: 0
        };
    }

    ...

    render() {
        return (
            <Switch>
                <Route exact path="/admin" render={() => <Admin counters={this.state.counters} total={this.state.total} />}/>
                <Route exact path="/user" render={() => <Admin counters={this.state.counters} total={this.state.total} />}/>
            </Switch> 
        );
    }
}

这将保持同步，因为计数器仅存储在父组件的一个位置

选项2：全局状态管理库

另一种选择是像Redux这样的状态管理库。这将为您提供一个全局状态，在卸载组件时不会删除该状态，而不像您的本地This.state。您将计数器置于此全局状态，然后管理员将对其执行操作，如递增和递减，例如，管理员和非管理员组件将通过调用this.props.reduxStateCounters从中获取计数器值，类似于本地状态

---

可以阅读更多关于Redux的内容。

您应该通过一个框架来了解如何使用共享状态，如Thank You，我将进一步研究Redux的使用。

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Counter from "./counter";

class Counters extends Component {
    constructor() {
        super();
        this.state = {
            counters: [
                { id: 1, value: 0 },
                { id: 2, value: 0 },
                { id: 3, value: 0 },
                { id: 4, value: 0 },
                { id: 5, value: 0 }
            ],
            total: 0
        };
    }
    handleIncrement(counter) {
        const total = this.state.total + 1;
        const counters = [...this.state.counters];
        const index = counters.indexOf(counter);
        counters[index] = { ...counter };
        counters[index].value++;
        this.setState({ counters: counters, total: total });
    }

    handleDecrement(counter) {
        const total = this.state.total - 1;
        const counters = [...this.state.counters];
        const index = counters.indexOf(counter);
        counters[index] = { ...counter };
        counters[index].value--;
        this.setState({ counters: counters, total: total });
    }

    handleReset() {
        const total = 0;
        const counters = this.state.counters.map(c => {
            c.value = 0;
            return c;
        });
        this.setState({ counters: counters, total: total });
    }

    render() {
        return (
            <div>
                <button onClick={this.handleReset.bind(this)}>Reset</button>
                {this.state.counters.map(counter => (
                    <Counter
                        key={counter.id}
                        onIncrement={this.handleIncrement.bind(this)}
                        onDecrement={this.handleDecrement.bind(this)}
                        counter={counter}
                    />
                ))}
                <span>{this.state.total}</span>
            </div>
        );
    }
}

export default Counters;

if (document.getElementById("counters")) {
    ReactDOM.render(<Counters />, document.getElementById("counters"));
}

class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            counters: [
                { id: 1, value: 0 },
                { id: 2, value: 0 },
                { id: 3, value: 0 },
                { id: 4, value: 0 },
                { id: 5, value: 0 }
            ],
            total: 0
        };
    }

    ...

    render() {
        return (
            <Switch>
                <Route exact path="/admin" render={() => <Admin counters={this.state.counters} total={this.state.total} />}/>
                <Route exact path="/user" render={() => <Admin counters={this.state.counters} total={this.state.total} />}/>
            </Switch> 
        );
    }
}