Javascript 切换时，搜索框值未得到更新[React+；Redux]

目前，我正在从事一个项目，我正在使用react和redux来构建它

场景

有一个切换按钮，可以在组队列和我的队列之间切换。这两者都将命中api并加载数据（票据列表）。[即，2个单独的实体]

现在有一个搜索框，while将根据我输入的值给出结果。我添加了“”，即在2秒后，onChange事件将触发，并将向所有还原程序发送操作

问题

比方说，我在group Queue下搜索一个值（68），它可以正常工作。现在，若我切换到我的队列，SearchBox的值应该是null，但它显示为68 正如我所说的，两个队列都是独立的主体，如果我切换，searchBox的值应该消失，但它不会消失

原因

我正在存储搜索框值和计时器的状态，以设置2秒后键入时的值，并且在我键入的每个字符上，都将调用setTimeOut和clearTimeOut以适应搜索

因此，我的React SearchBox组件中有一个状态，一旦我键入并保持2秒钟不变，它就会通过useEffect/ComponentDidUpdate发送操作

我决定在组件中有一个状态，因为我不想对每个角色用户类型触发操作。只应存储预期的搜索值Redux

我尝试过的事情

我尝试使用getDerivedStateFromProps，但由于我需要使用SetState及其异步，因此它不能反映当前值

我添加了两个功能（onChange和OnEnter）。有了OnEnter，我认为它会起作用，因为我可以将redux存储的值和操作传递给输入的值和OnEnter属性。[我没有试过]

但是我想要延迟功能。有人能提出一个替代方案吗

代码

一,。搜索组件

如果您有任何解决方案，请告诉我

编辑1 我尝试了UseEffect上的props.value，现在搜索本身不起作用了。

useEffect(() => {
    // setValue(props.value); // not working

    setTimer(
      setTimeout(() => {
        if (timer) props.filterAction("SEARCH_FILTER", value);
      }, WAIT_INTERVAL)
    );
    setValue(props.value); // not working

    return () => clearTimeout(timer);
  }, [props.value]);

Edit2

我按照Sabbit的建议添加了一个单独的useffect，但是如果我键入68，搜索功能将在6和键入值（68）上交替调用

   useEffect(() => {
    setTimer(
      setTimeout(() => {
        if (timer && value.length > 0)
          props.filterAction("SEARCH_FILTER", value);
      }, WAIT_INTERVAL)
    );
    return () => clearTimeout(timer);
  }, [value]);

  useEffect(() => {
    if (value !== props.value) setValue(props.value);
  }, [props.value]);

---

你有没有试过用另一个useEffect来制作道具.value

useEffect(() => {
  setTimer(
    setTimeout(() => {
       if (timer && value.length > 0) props.filterAction("SEARCH_FILTER", value);
    }, WAIT_INTERVAL)
  );
  return () => clearTimeout(timer);
}, [value]);

useEffect(() => {
   setValue(props.value);
}, [props.value]);

这将在每次更改props.value时更新状态中的值。我相信reducer中的

searchValue

是通过props传递给

Search

组件的

---

Update：我已将执行

props.filterAction（“SEARCH\u FILTER”，value）

的条件从

if（timer）

更新为

if（timer&&value.length>0）

。我们需要这样做，因为每次道具更改时，我们都在状态中设置

值

，并且根据状态中

值的更改使用了useEffect。这就是它使用空字符串搜索的原因。我们需要确保搜索不会发生，除非输入字段中有内容。
我试过了，现在搜索没有发生。。请参阅edit1部分，您可以创建多个useEffect。你不应该更新以前的useEffect，只需要在下面添加另一个useEffect。我已经更新了我的代码。请看那个。您以前的使用效果应该保持原样。然后再添加一个useEffect方法调用。你没有在第二个useEffect中声明任何计时器，因此你不应该清除那里的任何内容。嗨，没有。。虽然每次切换都会清除值，但搜索每秒钟都在进行。。就像它每秒自动调用一个空值和键入的值一样
   useEffect(() => {
    setTimer(
      setTimeout(() => {
        if (timer && value.length > 0)
          props.filterAction("SEARCH_FILTER", value);
      }, WAIT_INTERVAL)
    );
    return () => clearTimeout(timer);
  }, [value]);

  useEffect(() => {
    if (value !== props.value) setValue(props.value);
  }, [props.value]);


useEffect(() => {
  setTimer(
    setTimeout(() => {
       if (timer && value.length > 0) props.filterAction("SEARCH_FILTER", value);
    }, WAIT_INTERVAL)
  );
  return () => clearTimeout(timer);
}, [value]);

useEffect(() => {
   setValue(props.value);
}, [props.value]);