Question

我为此苦了一段时间。我将尽力描述它。我有两个组成部分。在第一个（让其命名为parent）中，我有一个函数接收一个参数，并使用它设置该父组件的状态。它还会执行一些操作来更改redux存储中的数据。我也在监视组件状态的变化，只是看它何时发生变化。我需要从其他组件中调用该函数（让其命名为child）并传递参数。参数是来自redux存储的数据，该数据随该函数而更改。

父组件：

const ParentComponent = (props) => {
    const [selectedUser, setSelectedUser] = useState({});

    const doSomething = (user) => {
        setSelectedUser(user)
        changeReduxStore(user);
    }

   // check if selected user has changed

   useEffect(() => {
      console.log('data changed')
   }, [selectedUser])

   return(
       <ChildComponent handleClick={doSomething}/>
   )
}

子组件：

const ChildComponent = (props) => {

   return(
       <div onClick={() => props.handleClick(props.user)}/>Trigger click</div>
   )
}

问题是当我触发该功能时，状态selectedUser会更改两次，而控制台消息“数据已更改”会记录两次，而只需要一次。看起来，当函数触发时，它会设置父组件状态并更改redux存储数据，并且当redux存储中的数据发生更改时，子组件渲染（完全正常的原因是子组件接收该数据作为道具），并且在渲染时更改了状态父组件，但不会再次触发该功能。

我已经尝试过执行类似的操作，但它也会两次更改selectedUser。

 const ChildComponent = (props) => {

     const callFunction = () => {
         props.handleClick(props.user)
     }

     return(
        <div onClick={callFuncion}/>Trigger click</div>
     )
 }

为什么Redux存储数据更改会触发组件状态更改？

0 个答案: