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

我正在为此挣扎一段时间。我会尽量简单地描述它。我有两个部分。在第一个（让我们把它命名为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}/>
   )
}

constparentcomponent=（props）=>{
const[selectedUser，setSelectedUser]=useState（{}）；
常数doSomething=（用户）=>{
设置选择器（用户）
changeReduxStore（用户）；
}
//检查所选用户是否已更改
useffect（（）=>{
console.log（'数据已更改'）
}，[selectedUser]）
返回(
)
}

子组件：

const ChildComponent = (props) => {

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

constchildcomponent=（道具）=>{
返回(
props.handleClick（props.user）}/>触发单击
)
}

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

我已经尝试过这样做，但它也改变了selectedUser两次

 const ChildComponent = (props) => {

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

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

constchildcomponent=（道具）=>{
常量调用函数=（）=>{
props.handleClick（props.user）
}
返回(
触发点击
)
}

setState

是一个异步操作，但如果它是在非生命周期方法中，它将立即触发渲染。因此，您有2个状态（组件、redux）更新，从而产生2个渲染。问题是，为什么需要组件状态？该值在存储中，所以为什么不从那里提取它呢？当您调度操作并更新redux存储时，道具正在更改，这将触发重新渲染。使用效果将被调用两次，一次用于状态更改，另一次用于父组件中的redux道具更改。另外请注意，

setSelectedUser

将被调用一次。您的

useffect

被调用了两次，这应该不是什么大问题deal@Rajesh我没有考虑到setState是一个异步的，我将尝试重新构造它。我在这里简化了它，我也对这些数据做了一些处理，所以我不能仅仅从存储中获取数据。useEffect被调用三次。第一次是在组件挂载时，然后当我再次点击触发函数两次时，但它应该只触发一次，因为我只更改状态once@shubham-gupta但是redux道具上的useEffect应该不会触发更改，因为我将依赖项设置为仅在状态更改时触发。现在它在组件挂载时触发，当我点击该函数时，它会触发两次，应该只有一次