React 在狀態更改后重新渲染子組件

Question

我在 React 中有一個組件，它呈現@material-ui表（如果重要，可以通過 React Router 訪問）。 在表格內，我有一個react-select下拉菜單，但它是通過單獨的組件呈現的。 這是該父組件的代碼：

return(
        <>
            <Table aria-label="customized table">
                <TableHead>
                    <TableRow>
                        <StyledTableCell align="center"><GameTypeSelector onGameTypeChange={setSelectedGameType} gameTypes={gameTypes} /></StyledTableCell>

...

顯然，我將在一秒鍾內訪問的GameTypeSelector呈現下拉列表，而gameTypes包含它的選項。 setSelectedGameType應該更新一個本地狀態變量，該變量將在每次下拉更改時保存新值：

const [selectedGameType, setSelectedGameType] = useState(null);

所以最后一件事是其他組件本身。 它也非常簡單：

const [selected, setSelected] = useState({ value: "", label: "Please select game type" });
const [options, setOptions] = useState([]);

useEffect(() => {
    //set options here
}, [props]);

useEffect(() => {
    console.log("in use effect of gamte type selectedo");
    props.onGameTypeChange(selected.value);
}, [selected.value, props]);

return (
    <>
        <Select
            value={selected}
            onChange={selectedOption => setSelected({ value: selectedOption.value, label: selectedOption.label })}
            options={[{ value: null, label: "All" }, ...options]}
        />
    </>
);

當我從下拉列表中更改值時，發生了最奇怪的事情。 它更新本地selected ，然后從父控制器調用該函數。 該函數輪到更新selectedGameType ，它仍然可以正常工作並按預期工作。

但是，在那次更新之后，它會再次重新渲染表中的GameTypeSelector ，然后將其中的selected值設置為來自這一行的默認useState({ value: "", label: "Please select game type" }); . 之后selectedGameType的父值也設置為空。

在瀏覽器中，它看起來像這樣：我從下拉列表中選擇一個值，將其設置在其中，更新父組件（通過不同的控制台日志計算），然后重置GameTypeSelector組件，它會變為默認值。 它只重新渲染單個部分，表格的其余部分保持不變並且不會重新渲染，並且代碼中沒有任何內容涉及其他任何地方的selectedGameType 。

知道出了什么問題嗎？ 我想我在這里遺漏了一些重要的東西，但我不知道是什么？

Answer 1

這就是 React 應該如何工作的，如果您將組件設置為一個狀態，那么它將始終顯示該狀態，您需要實現方法來處理更改並根據需要更新狀態。 看這個鏈接