Reactjs 方法从另一个组件触发console.log

当我单击betnow时，该函数会从另一个组件触发一个console.log。betNow应该将来自stack的所有输入分组到一个公共数组中，但当我单击它时，它会呈现来自stack的控制台日志，并将我键入的所有值包含到一个数组中。一切正常，但并非如我所愿。父组件应显示包含所有值的公共数组。我不明白为什么会这样。有谁能解释一下为什么会有这样的反应？提前谢谢

父组件

import React, { useState } from 'react';
import Button from '@material-ui/core/Button';
import FilterMenu from "./selectButton";
import FetchRandomBet from "./fetchRandomBets";

function Betslip() {
    const data = [
        {
            value: 0,
            label: "No Filter"
        },
        {
            value: 1,
            label: "Less than two"
        },
        {
            value: 2,
            label: "More than two"
        },
    ]

    const [selectedValue, setSelectedValue] = useState(0);
    const [allStakes, setAllStakes] = useState([]);

    const handleChange = obj => {
        setSelectedValue(obj.value);
    }

    const betNow = () => {
        const stakes = localStorage.getItem("stakes");
        const jsnStake = JSON.parse(stakes) || [];
        setAllStakes([...allStakes, jsnStake]);
    }

    return (
        <div className="betslip">
            <div className="betslip-top">
                <h1 className="text">BETSLIP</h1>
                <p className="text-two">BET WITH US!</p>
                <div>
                    <FilterMenu
                        optionsProp={data}
                        valueProp={selectedValue}
                        onChangeProp={handleChange}
                    />
                </div>
            </div>
            <div>
                <FetchRandomBet
                    valueProp={selectedValue}
                />
            </div>
            <Button
                onClick={betNow}
                className="betnow"
                variant="contained"
            >
                Bet Now!
                </Button>
        </div>
    );
}

export default Betslip;

import React, { useState, useEffect } from 'react';

function Stake() {
    const [stakes, setStakes] = useState([]);

    const addStake = (e) => {
        e.preventDefault();
        const newStake = e.target.stake.value;
        setStakes([newStake]);
    };

    useEffect(() => {
        const json = JSON.stringify(stakes);
        localStorage.setItem("stakes", json);
    }, [stakes]);
    console.log(stakes)
    return (
        <div>
            <form onSubmit={addStake}>
                <input
                    style={{
                        marginLeft: "40px",
                        width: "50px"
                    }}
                    type="text"
                    name="stake"
                    required
                />
            </form>

        </div>
    );
}

export default Stake;

import React，{useState}来自“React”；
从“@material ui/core/Button”导入按钮；
从“/selectButton”导入过滤器菜单；
从“/fetchRandomBets”导入FetchRandomBet；
函数Betslip（）{
常数数据=[
{
值：0，
标签：“无过滤器”
},
{
价值：1，
标签：“少于两个”
},
{
价值：2，
标签：“两个以上”
},
]
常量[selectedValue，setSelectedValue]=使用状态（0）；
const[allstacks，setallstacks]=useState（[]）；
常量handleChange=obj=>{
设置选定值（目标值）；
}
常数betNow=（）=>{
const stacks=localStorage.getItem（“stacks”）；
const jsnStake=JSON.parse（木桩）| |[]；
设置所有赌注（[…所有赌注，jsnStake]）；
}
返回(
贝特利普
与我们打赌
现在打赌！
);
}
出口违约金；

子组件

import React, { useState } from 'react';
import Button from '@material-ui/core/Button';
import FilterMenu from "./selectButton";
import FetchRandomBet from "./fetchRandomBets";

function Betslip() {
    const data = [
        {
            value: 0,
            label: "No Filter"
        },
        {
            value: 1,
            label: "Less than two"
        },
        {
            value: 2,
            label: "More than two"
        },
    ]

    const [selectedValue, setSelectedValue] = useState(0);
    const [allStakes, setAllStakes] = useState([]);

    const handleChange = obj => {
        setSelectedValue(obj.value);
    }

    const betNow = () => {
        const stakes = localStorage.getItem("stakes");
        const jsnStake = JSON.parse(stakes) || [];
        setAllStakes([...allStakes, jsnStake]);
    }

    return (
        <div className="betslip">
            <div className="betslip-top">
                <h1 className="text">BETSLIP</h1>
                <p className="text-two">BET WITH US!</p>
                <div>
                    <FilterMenu
                        optionsProp={data}
                        valueProp={selectedValue}
                        onChangeProp={handleChange}
                    />
                </div>
            </div>
            <div>
                <FetchRandomBet
                    valueProp={selectedValue}
                />
            </div>
            <Button
                onClick={betNow}
                className="betnow"
                variant="contained"
            >
                Bet Now!
                </Button>
        </div>
    );
}

export default Betslip;

import React, { useState, useEffect } from 'react';

function Stake() {
    const [stakes, setStakes] = useState([]);

    const addStake = (e) => {
        e.preventDefault();
        const newStake = e.target.stake.value;
        setStakes([newStake]);
    };

    useEffect(() => {
        const json = JSON.stringify(stakes);
        localStorage.setItem("stakes", json);
    }, [stakes]);
    console.log(stakes)
    return (
        <div>
            <form onSubmit={addStake}>
                <input
                    style={{
                        marginLeft: "40px",
                        width: "50px"
                    }}
                    type="text"
                    name="stake"
                    required
                />
            </form>

        </div>
    );
}

export default Stake;

import React，{useState，useffect}来自“React”；
功能桩（）{
const[stacks，settakes]=useState（[]）；
const addstack=（e）=>{
e、 预防默认值（）；
const newStake=e.target.stack.value；
设置镜头（[新闻镜头]）；
};
useffect（（）=>{
const json=json.stringify（木桩）；
setItem（“木桩”，json）；
}，[股权]；
控制台日志（木桩）
返回(
);
}
出口违约股权；

您的console.log函数将在每次呈现组件时运行，因为它不属于任何函数：