Javascript 为什么我的SoupRequest"；被重置为初始值，以及如何修复它

这是我第一次接触Reaction，也是我在Stack上的第一个问题，请耐心等待.

我有一个干净的App.jsx来呈现父组件Lettersoup.

App.jsx个

import './assets/CSS/App.css';
import LetterSoup from './components/LetterSoup';

function App() {

    return ( 
        <div className="app_container">
            <LetterSoup />
        </div>);

}
export default App;

这款应用有一个父Lettersoup，它调用controlpanel、grid和words组件.与这个问题相关的是controlpanel.我将注释掉grid和words的div，因为它们正在工作，不需要用来解决这个问题.

在Lettersoup上有基本的布局和逻辑...

Lettersoup.jsx个

import { useEffect, useState, useRef } from 'react';
import ControlPanel from '../components/ControlPanel';
import Grid from '../components/Grid';
import Words from '../components/Words';

function LetterSoup() {

    const [soupRequest, setsoupRequest] = useState(null);
    const [letterSoup, setletterSoup] = useState(null);
    const [isLoading, setisLooading] = useState(true);
    const childToParent = (childdata) => {
        console.log("CLICK");
        setsoupRequest(childdata);
    }
    const contents = isLoading == true
        ? <p>Loading...</p>
        :
        <div className="lettersoup_container">
            <h1 id="tabelLabel">Sopa de letras (PT)</h1>
            <div className="controlpanel_container">
                {soupRequest && <ControlPanel soupRequest={soupRequest} childToParent={childToParent} />}
            </div>
            <div>
                {letterSoup.wordsNum} palavras
            </div>
/*          <div className="grid_container">
                <Grid board={letterSoup.board} />
            </div>
            <div className="words_container">
                <Words words={letterSoup.words} />
            </div>
*/
        </div>;

    useEffect(() => {
        let ignore = false;
        async function fetchData(sr) {
            let aux;
            console.log("REQ " + JSON.stringify(sr));
            if (sr == null) {
                aux = (`/lettersoup/15/10/4`);
                sr = ({ gridNum: 15, wordNum: 10, charNum: 4 });
                setsoupRequest(sr);
                console.log("need new");
            }
            else {
                aux = (`/lettersoup/${sr.gridNum}/${sr.wordNum}/${sr.charNum}`);
                console.log("had one");
            }

            try {
                const response = await fetch(aux);
                if (!ignore)
                    if (response.ok) {
                        const data = await response.json();
                        setletterSoup(data);
                        setisLooading(false);
                    } else throw Error("nao é ok");
            }
            catch {
                console.log(error.message)
            }
        }
        fetchData(soupRequest);

        return () => {
            //cleanup
            ignore = true
            setisLooading(true);
        };
    }, [soupRequest]);

    return (<div>{contents}</div>);
}

export default LetterSoup;

第二个On具有用于更改后续API获取以进行渲染的参数的控件.

Controlpanel.jsx个

import { useId, useState } from 'react';

function ControlPanel({ soupRequest, childToParent }) {

    const inputId = useId();
    const [tmpRequest, setmpRequest] = useState(soupRequest);


    return (
        <form className="controlpanel">
            <div className="controlpanel_settings">
                <div className="controlapanel_setting"><label htmlFor={inputId}>Tamanho da grelha</label>
                    <input type="number" value={tmpRequest.gridNum} min="10" max="25" step="5" id={inputId} name="gridNum" onChange={event => setmpRequest({ gridNum: parseInt(event.target.value), wordNum: parseInt(tmpRequest.wordNum), charNum: parseInt(tmpRequest.charNum) })} className="controlpanel_setting_input" />

                </div>
                <div className="controlapanel_setting"><label htmlFor={inputId + 1}>Número de palavras</label>
                    <input type="number" value={tmpRequest.wordNum} min="10" max="50" step="1" id={inputId + 1} name="wordNum" onChange={event => setmpRequest({ gridNum: parseInt(tmpRequest.gridNum), wordNum: parseInt(event.target.value), charNum: parseInt(tmpRequest.charNum) })} className="controlpanel_setting_input" />
                </div>
                <div className="controlapanel_setting"><label htmlFor={inputId + 2}>Mínimo de letras</label>
                    <input type="number" value={tmpRequest.charNum} min="3" max="20" step="1" id={inputId + 2} name="charNum" onChange={event => setmpRequest({ gridNum: parseInt(tmpRequest.gridNum), wordNum: parseInt(tmpRequest.wordNum), charNum: parseInt(event.target.value) })} className="controlpanel_setting_input" />
                </div>
            </div>
            <div className="controlpanel_button">
                <button onClick={() => { childToParent(tmpRequest); }}>GO</button>
            </div>
        </form>
    );
}

export default ControlPanel;

我可以获得从子进程发送的父进程的更新值soupRequest，但一旦*useEffect*运行，soupRequest就被设置为null，从而一遍又一遍地呈现默认值.

我所期望的是从controlpanel组件发送的soupRequest保持不变，从而允许我获取正确的资源.如果它在工作，controlpanel上的输入将保持先前设置的值，而不是缺省值.

我已经阅读和try 了很多东西，包括useRefs个等等，尽管我喜欢学习的旅程，我读了很多，仍然被困住了，我想继续前进，学习其他东西.几乎可以肯定的是，这是你们一 blink 就会笑着解决的问题之一，或者甚至不会经历，但请给我一个推动力.

希望我能提供所需的代码和解释.如果没有，请让我知道，我会改进的.