我如何在其他组件内使用我的增量值

Question

For school i need to make an react app, it is my first time using, html, css, javascript and react and now i am stuck on part where i have to post the data to an API. 我的职责是创建一个页面，人们可以在其中 select 吃喝玩乐以及按下 oke。 数据已发送。

我创建了一个选择器

import React, { Component } from "react";
export default class Selector extends Component {
    state = {
        value: this.props.selector.value,
    };

    handleIncrement = () => {
        this.setState({ value: this.state.value + 1 });
        console.log(this.state.value);
    };

    handleDecrement = () => {
        this.setState({ value: this.state.value - 1 });
    };

    render() {
        return (
            <div>
                {this.props.children}
                <span>{this.state.value}</span>
                <button
                    onClick={this.handleIncrement}
                    className="btn btn-secondary btn-sm m-2"
                >
                    +
                </button>
                <button
                    onClick={this.handleDecrement}
                    className="btn btn-secondary btn-sm m-2"
                >
                    -
                </button>
                <button
                    onClick={() =>
                        this.setState({
                            value: 0,
                        })
                    }
                    className="btn btn-danger btn-sm m-2"
                >
                    Reset
                </button>
            </div>
        );
    }
}

从一个选择器我做了多个选择器

import React, { Component } from "react";
import Selector from "./selector";
import axios from "axios";

export default class Selectors extends Component {
    state = {
        skittleSelectors: [
            { id: 1, value: 0, color: "Green", availability: 0 },
            { id: 2, value: 0, color: "Red", availability: 0 },
            { id: 3, value: 0, color: "Yellow", availability: 0 },
            { id: 4, value: 0, color: "Purple", availability: 0 },
            { id: 5, value: 0, color: "Orange", availability: 0 },
        ],
    };

postData(){
        const greenSelector = this.state.skittleSelectors.findIndex(
            (element) => element.color === "Green"
        );
        let greenValue = this.state.skittleSelectors[greenSelector].value;
        console.log(greenValue);
    };

render() {
        return (
            <div>
                <button onClick={this.postData}>POSTDATA</button>
                {this.state.skittleSelectors.map((selector) => (
                    <Selector
                        key={selector.id}
                        selector={selector}
                        onReset={this.handleReset}
                    >
                        <p>{selector.color}:</p>
                        <p>amount availible: {selector.availability}</p>
                    </Selector>
                ))}
            </div>
        );
    }
}

现在我的问题

当我记录单个选择器的 handleIncrement() 中的值时，它会正确显示在控制台中。 但我想在选择器页面中使用该数据。 但是当我尝试在那里记录它时，它只是说 0 因为初始值。

我该如何解决这个问题。 我曾尝试使用 Selector.jsx 中的帖子，但我认为那不正确，我仍然无法让它工作。 我通过使用 componentDidMount() 和 componendDitUpdate() 在这里和那里进行了一些尝试，但没有成功。

那么如何使用我的 Selectors 文件中的 postData 方法中的更新声明。 我希望你们能在这里帮助我，1天后我完全卡住了。

先感谢您。

Answer 1

我已经修复了你的代码。 实际上，您需要将更改的值从Selector传递给Selectors ，这就是我使用onChangedValue道具所做的。 此外，当您使用当前state更改state时，我已经更改了setState您应该使用prevState

选择器组件

import React, {Component} from "react";
import axios from "axios";
import Selector from "./Selector";

export default class Selectors extends Component {
    state = {
        skittleSelectors: [
            {id: 1, value: 0, color: "Green", availability: 0},
            {id: 2, value: 0, color: "Red", availability: 0},
            {id: 3, value: 0, color: "Yellow", availability: 0},
            {id: 4, value: 0, color: "Purple", availability: 0},
            {id: 5, value: 0, color: "Orange", availability: 0},
        ],
    };

    postData = () => {
        const greenSelector = this.state.skittleSelectors.findIndex(
            (element) => element.color === "Green"
        );
        let greenValue = this.state.skittleSelectors[greenSelector].value;
        console.log(greenValue);
    };

    onChangedValue = (selector, value) => {
        this.setState(prevState => {
            let currentItem = this.state.skittleSelectors.find(s => s.id === selector.id);
            currentItem.value = value;
            return{ skittleSelectors: [...this.state.skittleSelectors] }
        }, console.log(this.state.skittleSelectors, 'skittleSelectors'));

    };

    render() {
        return (
            <div>
                <button onClick={this.postData}>POSTDATA</button>
                {this.state.skittleSelectors.map((selector) => (
                    <Selector
                        key={selector.id}
                        selector={selector}
                        onReset={this.handleReset}
                        onChangedValue={this.onChangedValue}
                    >
                        <p>{selector.color}:</p>
                        <p>amount availible: {selector.availability}</p>
                    </Selector>
                ))}
            </div>
        );
    }
}

选择器组件

import React, {Component} from "react";

export default class Selector extends Component {
    state = {
        value: this.props.selector.value,
    };

    handleIncrement = () => {
        this.setState(prevState => {
            return {value: prevState.value + 1}
        }, () => this.props.onChangedValue(this.props.selector, this.state.value));
    };

    handleDecrement = () => {
        this.setState(prevState => {
            return {value: prevState.value - 1}
        }, () => this.props.onChangedValue(this.props.selector, this.state.value));
    };

    render() {
        return (
            <div>
                {this.props.children}
                <span>{this.state.value}</span>
                <button
                    onClick={this.handleIncrement}
                    className="btn btn-secondary btn-sm m-2"
                >
                    +
                </button>
                <button
                    onClick={this.handleDecrement}
                    className="btn btn-secondary btn-sm m-2"
                >
                    -
                </button>
                <button
                    onClick={() =>
                        this.setState({
                            value: 0,
                        })
                    }
                    className="btn btn-danger btn-sm m-2"
                >
                    Reset
                </button>
            </div>
        );
    }
}