反应钩子中的prevstate

Posted 2023-02-22

【中文标题】反应钩子中的prevstate

【英文标题】：prevstate in react hook

【发布时间】：2020-10-25 05:46:29

【问题描述】：

如何在功能组件中使用 prevState 和 useEffect？我被告知将类组件更新为功能组件，我被困在使用 prevState 的 componentDidUpdate 部分

 componentDidUpdate(prevProps, prevState) 
    if (prevState.search !== this.state.search) 
      this.getData()
    
    if (prevState.finalSearch !== this.state.finalSearch) 
      if (this.state.finalSearch) 
        this.newData()
       else 
        this.getRawData()
      
    
  
 

<Search
          search=search
          finalSearch=finalSearch
        />

【问题讨论】：

你能发布更多你的代码并澄清一下吗？很难说出您的问题是什么或您要确切地问什么。通常，如果您使用的是useEffect，则您没有使用componentDidUpdate，所以我对您的问题有点困惑。

我被告知将类组件更新为功能组件，代码中有这个 componentDidUpdate 我不知道如何将其更改为 useEffect @otw

this 回答你的问题了吗？

也看看React docs

【参考方案1】：

在类生命周期组件中没有 prevState，但是 我认为这里的答案可能会对您有所帮助，而不是让道具成为状态

How to compare oldValues and newValues on React Hooks useEffect?

【参考方案2】：

所以看起来您只是使用先前的状态来避免这里不必要的渲染。这实际上很常见，它内置于useEffect：

componentDidUpdate(prevProps, prevState) 
  if (prevState.count !== this.state.count) 
    document.title = `You clicked $this.state.count times`;
  

变成：

useEffect(() => 
  document.title = `You clicked $count times`;
, [count]); // Only re-run the effect if count changes

来源：https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

您的组件可能类似于：

useEffect(() => 
  getData()
  
  if (finalSearch) 
    newData()
   else 
    getRawData()
  
, [search, finalSearch]);

【讨论】：

@reactRookie 你的问题是什么意思？你的意思是为什么它不渲染？我在这里看不到您问题的代码。

@reactRookie 我看到了/src/App.js: Unexpected token (159:0)

@reactRookie 我更新了我的答案以获得我认为您的组件应该是什么样子。你不应该需要usePrevious。

@reactRookie 函数被下划线只是你的编译器告诉你有一个错误。如果您将鼠标悬停在它上面，它会告诉您原因。该代码中似乎存在很多不同的问题。

@reactRookie 当我输入一些东西时，当你选择一个结果时它似乎工作得很好。如果您说当您单击并选择一个结果时什么也看不到，那么您的模糊功能看起来并没有修改任何状态。

【参考方案3】：

你必须创建你的自定义钩子usePrevious，参考这个：here。

function usePrevious(value) 
  const ref = useRef();
  useEffect(() => 
     ref.current = value;
  );
  return ref.current;

那么你必须这样做：

const Component = (props) => 
   const search, setSearch = useState('');
   const prevSearch = usePrevious(search, setSearch);
   useEffect(() => 
      if(prevSearch.search !== search) 
          //Your code goes here
      
   , [search])

【讨论】：

因此，由于它们只使用以前的值来检测是否需要渲染，因此您不需要自定义挂钩，这是内置于 useEffect:reactjs.org/docs/…

@otw 是的，对于这种特殊情况，我们可以使用useEffect 钩子。但是，如果我们想使用prevState 值（例如，我们有一个复选框，并且根据以前的值，我们需要更改它），那么上述方法将特别解决该问题。因此，根据情况，我们可以寻找最佳方法并应用它来解决它。