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

Question

我目前正在建立一个计点网站，用户可以给每个玩家点数。计算所有点的总数，并将其显示在管理员页面上的计数器下方。现在我想要的是我也想在不同的页面上显示总价值，玩家可以在其中看到他们的球队得分多少。但是，此总值必须与管理员页面中的总值同步。我怎样才能做到这一点？我听说过axios，但不知道它是如何工作的。有人能帮我吗？

---

我的代码：

计数器

import React, { Component } from "react";
import ReactDOM from "react-dom";

export default class Counter extends Component {
    render() {
        const { onIncrement, onDecrement } = this.props;
        return (
            <div>
                <span>{this.formatCount()}</span>
                <button onClick={() => onIncrement(this.props.counter)}>
                    Add
                </button>

                <button
                    onClick={() => onDecrement(this.props.counter)}
                    disabled={this.props.counter.value === 0 ? "disabled" : ""}
                >
                    Delete
                </button>
            </div>
        );
    }

    formatCount() {
        const { value } = this.props.counter;
        return value;
    }
}

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

计数器

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"));
}

Answer 1

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 here的更多信息。