我想在下面的 return 中显示选定的值，但我无法从中获取数据，这可能是一个我无法捕捉到的小问题

Question


    import { Autocomplete, Stack, TextField } from "@mui/material";
import { Box } from "@mui/system";
import axios from "axios";
import React, { useEffect, useState } from "react";

const SearchProperty = () => {
  const [searchResult, setSearchResult] = useState([]);
  const { saveResult, setSaveResult } = useState('');
console.log(saveResult)
  useEffect(() => {
    axios
      .get(`api/societies/`, {
        headers: {
          Authorization: `Bearer  ${localStorage.getItem("token")}`,
        },
      })
      .then((res) => {
        setSearchResult(res.data);
      });
  }, []);

  return (
    <div className="p-5 px-md-20 px-2xl-40 ">
      <Stack>
        <Autocomplete
          id="SearchProperty"
          getOptionLabel={(searchResult) => `${searchResult.name}`}
          options={searchResult}
          inputValue={saveResult}
          isOptionEqualToValue={(option, value) => option.name === value.name}
          onChange={(event, value) => setSaveResult(value)}
          noOptionsText={"No Such Property Available"}
          renderOption={(props, searchResult) => (
            <Box component="li" {...props} key={searchResult.society_id}>
              {searchResult.name}
            </Box>
          )}
          renderInput={(params) => (
            <TextField fullWidth {...params} label="Search Property By Name" onChange={({ target }) => setSaveResult(target.value)}/>
          )}
        />
      </Stack>
      <div>
        <div className="flex">
       {
            <div>
            <h2>{saveResult?.name}</h2>
            <h2>{saveResult?.society_id}</h2>
            <h2>{saveResult?.name}</h2>
          </div>
       }
        </div>
      </div>
    </div>
  );
};

export default SearchProperty;

我的 api 工作正常我可以在下拉列表中看到搜索结果我可以 select 结果但我无法将其保存在我的状态 onChange={(event, value) => console.log(value)} 这有效

onChange={(event, value) => setSaveResult(value)}

这行不通我收到这个错误未捕获的类型错误：setSaveResult 不是函数

这是我正在使用 MUI 自动完成的 REACT 代码

Answer 1

更改您的 onChange fn。

onChange={(event, v) => {     
   setSaveResult(v)  
 }
}

OnChange 您正在调用一个匿名函数并且该函数正在执行 setSaveResult，并且您将两个参数传递给匿名 fn，事件和值。

我想在下面的 return 中显示选定的值，但我无法从中获取数据，这可能是一个我无法捕捉到的小问题

I want to display the selected value in return below but i am unable get the data from it it might be a minor issue i am unable to catch

reactjs

material-ui

autocomplete