是否可以在不渲染的情况下更改 useState 值？ 反应

Question

我需要在不渲染页面的情况下更改 useState。

首先可能吗？

const UsersComponent = ({valueProp}) => {

const [users, setUsers] = useState(valueProp);
const [oldUsers, setoldUsers] = useState(value);

  const allUsers = useSelector((state) =>
    state.users
  );

  useEffect(() => {
    dispatch(getUsersData());
  }, [dispatch]);

  useEffect(() => {
    // assign users to state oldUsers
  }, [dispatch]);


  const onClickMergeTwoArrayOfUsers = () => {
    let oldUsers = collectData(oldUsers);
    const filteredUsers = intersectionBy(oldUsers, valueProp, "id"); 

     setUsers(filteredUsers); // most important
     console.log("filteredUsers", filteredUsers);  // not changed
  };

我尝试了一切，没有任何帮助。

  useEffect(() => {
        let oldUsers = collectData(oldUsers);
        const filteredUsers = intersectionBy(oldUsers, valueProp, "id"); 
 
       setUsers(filteredUsers); // most important
  }, [users]); // RETURN INFINITIVE LOOP

我也在尝试->

  useEffect(() => {
        let oldUsers = collectData(oldUsers);
        const filteredUsers = intersectionBy(oldUsers, valueProp, "id"); 
 
       setUsers(filteredUsers); // most important
  }, []);

只加载一个，这对我没有任何意义..

我正在尝试使用 useRef，但在这种情况下这对我没有帮助。

我将尝试解释问题的基础。

我需要得到一个获取数据。 之后点击一个按钮，我需要合并 oldUsers 和 users 而不渲染，更改 state。 那是问题。

如果这个问题没有解决方案，请告诉我我能做些什么来解决这个问题？

我正在谷歌搜索但没有成功......我也在尝试这个解决方案从互联网 - >

const [state, setState] = useState({});
setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

没有工作。

我也在尝试->

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});

这是问题，因为我需要异步获取，然后才能循环。

Answer 1

无论您最终想要做什么，使用ref可能是一个更好的选择。

是的，有可能，但它违反了 React state 的核心规则之一： Do Not Modify State Directly 。

React compares state values using Object.is equality, so if you simply mutate an object in state instead of replacing it with a new value that is not object-equal, then the state "update" will not cause a re-render (but this被认为是您程序中的错误。），无论如何：这就是您的操作方式：

 <div id="root"></div><script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone@7.17.1/babel.min.js"></script> <script type="text/babel" data-type="module" data-presets="env,react"> const {useCallback, useState} = React; function Example () { const [state, setState] = useState([1]); const logState = useCallback(() => console.log(state.join(', ')), [state]); // Don't actually do this..; const mutateState = () => { setState(arr => { arr;push(arr;at(-1) + 1); return arr. }), }; return ( <> <div>{state.join(', ')}</div> <button onClick={mutateState}>Mutate state</button> <button onClick={logState}>Log state</button> </> ). } ReactDOM;render(<Example />, document.getElementById('root')); </script>