每次渲染后，React Hook useEffect 中对“data”变量的赋值将会丢失

Question

有一个完整的警告消息：每次渲染后，React Hook useEffect 内部对“data”变量的赋值将丢失。要随着时间的推移保留该值，请将其存储在 useRef Hook 中，并将可变值保留在“.current”属性中。否则，您可以直接将此变量移动到 useEffect 内部。

我正在尝试使用材质表中 useState Hook 中的数据状态来显示数据。这就是为什么我将 const 更改为 let，但它不断给我警告，我不知道如何将 useRef Hook 与 useState Hook 一起使用。

const filterrr = () => {
    
    
            if (age.length !== 0) {
              return true;
            } 
            else {
              return false;
            }
        
          }
    
          let [data, setData] = useState(Data);
    
    
          useEffect(() => {
    
    
            console.log(Data);
            data = Data.filter(filterrr);
            setData(data);
          }, [age])

所以我尝试在 useEffect 之外使用 useState ，以便其他函数可以使用数据状态。

Answer 1

ReactuseState()变量是不可变的，即您不能data仅通过使用let关键字声明来直接修改它。要清除此警告，请修改您的代码，如下所示：

const filterrr = useCallback(() => {
  if (age.length !== 0) {
    return true;
  } else {
    return false;
  }
}, [age]);

const [data, setData] = useState(Data);

useEffect(() => {
  console.log("oldData", data);
  const newData = Data.filter(filterrr);
  console.log("newData", newData);
  setData(newData);
}, [filterrr]);

我曾经useCallback()包装该filterrr()方法，以便我们可以将其添加到useEffect()依赖项数组中，这通常是一个很好的做法。

如果您不需要filterrr()代码中其他地方的方法，只需将其移至内部，useEffect()无需useCallback()：

useEffect(() => {
  const filterrr = () => {
    if (age.length !== 0) {
      return true;
    } else {
      return false;
    }
  };
  console.log("oldData", data);
  const newData = Data.filter(filterrr);
  console.log("newData", newData);
  setData(newData);
}, [age]);