Reactjs 在react路由器中使用useParams传递参数onChange

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

Navbar.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>

---

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

是导航栏

链接到的路径上呈现的
searchResults
组件={`/search/${searchField}}

链接到的组件吗？你能说明这个路由是如何定义的吗？除非你做了一些奇怪的事情，比如使用多个

路由器

组件，否则我看不到路由到

路径=“/search/：value”

路由和访问

值

匹配参数的问题。现在我看到的问题是

SearchResult

中的

useffect

钩子似乎调用了几个函数，这些函数最终都异步设置了

searchResults

状态。（我刚刚意识到这就是你所说的你正在努力做的）那么，什么事情没有按预期的那样起作用呢？问题是什么？这些操作是否需要按特定顺序调用？问题在于，当我在搜索字段中键入时，它并没有在更改时调用所有函数。而且它并没有传递我在搜索字段中键入的所有字母表。const[searchResults，setSearchResults]=useState（{members:[]，tags:[]，groups:[]，events:[]，contents:[]，}）；我想根据函数设置这些数组，同时在搜索字段中键入内容时，必须一次调用该函数。

 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]);