如果 onChange 更改状态，MUI 自动完成不会更新所选值

Question

在我的 React 18.2.0 中，我的代码具有以下结构

   const [searchParams, setSearchParams] = useState({
      shoes:false,
      hoodies:false
   });

  const handleShoesDropDownChange = (e, v, setSearchParams) => {
    console.log(' value ' ,  v); // I can see the log OK
    console.log(' search params ' ,  searchParams); // i can see previous state OK
    //the following works, it changes the search paramns
    //but the autocomplete doesnt update the selected value
    setSearchParams(prevState => ({
      ...prevState,
      shoes: v.id
    }))
  }  

    useEffect(() => {
    //...
    }, []);



 return (
    <div className='generalcontainer'  >   

<Drawer>

  <Box>

            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
              <Tabs value={valueSearchTab} onChange={handleChangeSearchTab} aria-label="tabs" scrollButtons>
                <Tab label="Shoes" {...a11yProps(0)} />
                <Tab label="Hoodies" {...a11yProps(1)} /> 
              </Tabs>
            </Box>

            <TabPanel value={valueSearchTab} index={0}>

              {
                searchCategoriesInfoSelector.success!==true?
                <Box >Loading search components</Box>
                :
                searchCategoriesInfoSelector.data.shoes&& searchCategoriesInfoSelector.data.shoes.length>0? 

                <Box>   

                  <Autocomplete
                    id="combo-box-shoes"
                    options={searchCategoriesInfoSelector.data.shoes}
                    onChange={(event, value)=>handleShoesDropDownChange(event, value, setSearchParams)}
                    renderInput={(params) => <TextField {...params} label="Select shoes" />}
                  />    

                  <Button  
                    onClick={()=>searchByShoes(searchParams)}
                  >
                    Go                    
                  </Button >
                  
                </Box>  
                :
                'loading search bar'
              }

            </TabPanel>  


  </Box>

</Drawer>

有一个状态、一个自动完成以及一个在自动完成更改时调用的函数，以更改状态自动完成位于选项卡内。

当自动完成更改时，onChange 函数将被成功调用并成功更改状态。问题是自动完成不会将其值更改为所选值。如果我删除改变状态的部分，自动完成功能会将其值更改为所选值。

我该如何解决这个问题？

Answer 1

一旦您使用其中一个属性 value/onChange，您的组件就会变为“受控”。

这意味着您必须同时提供 onChange 和 value 属性。 onChange 处理该事件，value 将包含当前值。使用状态变量来存储当前值并将其提供给您的组件。

查看有关 MUI 文档的更多信息：受控自动完成

Answer 2

渲染自动完成的选项时使用状态，因为它将在自动完成的 renderOptions 中维护选定的道具

  const handleShoesDropDownChange = (e, v, setSearchParams) => {
    console.log(' value ' ,  v); // I can see the log OK
    console.log(' search params ' ,  searchParams); // i can see previous state OK
    //the following works, it changes the search paramns
    //but the autocomplete doesnt update the selected value
    setSearchParams(prevState => ({
      ...prevState,
      shoes: v.id
    }))
  }

在此处添加返回语句