当我执行 onSubmit 时，我无法显示 state

Question

I have the component that it is rendered 4 times in parent component. I would like to change the state in parent component and show the array with all the values of the four inputs. Anyway in the parent component when I do onSubmit the state does not seem to be updated and the value is not displayed. I think I am passing some props in a wrong way. Could anyone explain me properly what I am doing wrong? thanks a lot

import React, { useState } from 'react';
import CurrencyInput from 'react-currency-input-field';

function Stake(props) {
    const [newStake, setStake] = useState(['']);

    const changeStake = (e) => {
        setStake(e.target.value)
    }
    return (
        <>
            <CurrencyInput
                onChange={changeStake}
                newStakeProp={newStake}
                style={{
                    marginLeft: "40px",
                    width: "50px"
                }}
                placeholder="Stake"
                decimalScale={2}
                prefix="£"
            />
            <button onSubmitProp={props.onSubmit}>yes</button>
            <button>no</button>
            {newStake}
        </>
    );
}

export default Stake;

import React, { Component } from 'react';
import Stake from './stake';

class FetchRandomBet extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            bet: null,
            value: this.props.value,
            allStakes: ['']
        };
    }

    async componentDidMount() {
        const url = "http://localhost:4000/";
        const response = await fetch(url);
        const data = await response.json();

        this.setState({
            loading: false,
            bet: data.bets,
        });
    }

    render() {
        const { valueProp: value } = this.props;
        const { newStakeProp: newStake } = this.props;
        const { bet, loading } = this.state;

        if (loading) {
            return <div>loading..</div>;
        }
        if (!bet) {
            return <div>did not get data</div>;
        }
        return (
            < div >
                {
                    loading || !bet ? (
                        <div>loading..</div>
                    ) : value === 0 ? (
                        <div className="bet-list">
                            <ol>
                                <p>NAME</p>
                                {
                                    bet.map(post => (
                                        <li key={post.id}>
                                            {post.name}
                                        </li>
                                    ))
                                }
                            </ol>
                            <ul>
                                <p>ODDS</p>
                                {
                                    bet.map(post => (
                                        <li key={post.id}>
                                            {post.odds[4].oddsDecimal}
                                            <div className="stake-margin">
                                                <Stake
                                                    allStakes={this.state.allStakes}
                                                    onSubmit={() => { this.setState({ allStakes: [...newStake] }) }}
                                                >
{this.state.allStakes}
                                                </Stake>
                                            </div>
                                        </li>
                                    ))
                                }
                            </ul>
                        </div>
                  

Answer 1

newStake is the state of your Stake component. But the parent cannot know about it if you are not passing it up from the child component.

So the Stake child component should have its own submit function, which then calls the onSubmit of the parent with a parameter holding newStake

The inline onSubmit in the parent should then accept the parameter holding newStake, of course

import React, { useState } from 'react';
import CurrencyInput from 'react-currency-input-field';

function Stake(props) {
    const [newStake, setStake] = useState(['']);

    const changeStake = (e) => {
        setStake(e.target.value)
    }

    const mySubmit = () => {
        props.onSubmit(newStake);
    }
    return (
        <>
            <CurrencyInput
                onChange={changeStake}
                style={{
                    marginLeft: "40px",
                    width: "50px"
                }}
                placeholder="Stake"
                decimalScale={2}
                prefix="£"
            />
            <button onSubmitProp={mySubmit}>yes</button>
            <button>no</button>
            {newStake}
        </>
    );
}

export default Stake;

Answer 2

I tried to change onSubmit with onClick and it suddenly worked properly. Thanks for the help guys

<Stake
onClick={(newStake) => { this.setState({ allStakes: [...newStake, newStake] }) }}
 />

<button onClick={mySubmit}>yes</button>