reactjs - 在 react-router 中使用 useParams 传递参数 onChange

Question

我正在尝试实现搜索功能。我在 searchResult 组件中有导航栏组件。在导航栏中有一个搜索字段。我正在尝试同时调用 5 个函数来更新单个状态。但是在我的代码中，结果没有得到更新。

导航栏.js

 <Link to={`/search/${searchField}`} >
        <li className="nav-item">
          <form id="search-bar">
            <input
              type="search"
              placeholder="Search"
              onChange={(e) => setSearchField(e.target.value)}
            />
          </form>
        </li>
      </Link>

搜索结果.js

 const { value } = useParams();
 const { searchResults, setSearchResults } = useContext(search);
 const findMemberFunction = (value) => {
 let dataToSubmit = {
  referCode: value,
};
dispatch(findMember(dataToSubmit.referCode))
  .then((response) => {
    let allSearchResult = searchResults;

    response.payload.members.map((item) => {
      allSearchResult.members.push(item);
    });

    setSearchResults(allSearchResult);
  })
  .catch((error) => {
    console.log("err", error);
  });
 };
 const findSearchTagFunction = (value) => {
let dataToSubmit = {
  name: value,
};
dispatch(findTags(dataToSubmit.name))
  .then((response) => {
    let allSearchResult = searchResults;
    response.payload.tags.map((item) => {
      allSearchResult.tags.push(item);
    });

    setSearchResults(allSearchResult);
  })
  .catch((error) => {
    console.log("err", error);
  });
 };
const findGroupFunction = (value) => {
let dataToSubmit = {
  name: value,
};
dispatch(findGroup(dataToSubmit.name))
  .then((response) => {
    let allSearchResult = searchResults;
    response?.payload?.groups.map((item) => {
      allSearchResult.groups.push(item);
    });

    setSearchResults(allSearchResult);
  })
  .catch((error) => {
    console.log("err", error);
  });
 };
  const findEventFunction = (value) => {
let dataToSubmit = {
  name: value,
};
dispatch(findEvent(dataToSubmit.name))
  .then((response) => {
    let allSearchResult = searchResults;
    response.payload.events.map((item) => {
      allSearchResult.events.push(item);
    });

    setSearchResults(allSearchResult);
  })
  .catch((error) => {
    console.log("err", error);
  });
 };
 const findContentFunction = (value) => {
let dataToSubmit = {
  name: value,
   };
    dispatch(findContent(dataToSubmit.name))
  .then((response) => {
    let allSearchResult = searchResults;
    response.payload.contents.map((item) => {
      allSearchResult.contents.push(item);
    });

    setSearchResults(allSearchResult);
  })
  .catch((error) => {
    console.log("err", error);
  });
 };
 useEffect(() => {
findMemberFunction(value);
findSearchTagFunction(value);
findGroupFunction(value);
findEventFunction(value);
findContentFunction(value);
  }, [value]);

这不起作用，因为我期望有参数 onChange。

标签： reactjsreact-router