查找并替换搜索项中的字符

Question

我的React应用程序中有一个搜索栏，它获取输入并在表中搜索：

const [search, setSearch] = useState('');

const [users, setUsers] = useState([]);

useEffect(async () => {
      const response = await getUsers(search);
      setUsers(response.data.users);
  }, [search]);
.
.
.
<input type='text' className='my-3 py-2 pl-3 pr-10 text-sm' placeholder='search term..' onChange={(e) => setSearch(e.target.value)} value={search} />

效果很好。现在我想让它成为可能，当我的字符串包含一个特殊的字符，用另一个字符替换，并搜索新的术语。例如，如果我的字符串是hello，我希望将h更改为m并搜索mello。我把我的代码改为：

useEffect(async () => {
      if (search.indexOf('h') > -1)
      {
        alert('Found');
        search = search.replace("h", "m");
      }
      const response = await getUsers(search);
      setUsers(response.data.users);
  }, [search]);

现在，当输入字符串包含h时，我会收到一个警告，但搜索过程不能正常工作(它不会搜索任何内容)。我能做什么?

Answer 1

您实现的逻辑只需要进行小的更改，因为您正在尝试将值设置为搜索变量，但只能使用setter更新该值，而不能直接设置值。如果您只想在调用getUsers之前重写该字符，这可以帮助您修复代码。

useEffect(async () => {
    let searchValue = search.indexOf('h') > -1? search.replace("h", "m") : search;
    
    const response = await getUsers(searchValue);
    setUsers(response.data.users);
  }, [search]);