我如何在其他組件內使用我的增量值

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