小编Teh*_*ila的帖子

假设我有这个简单的虚拟组件：

const Component = () => {

  const [state, setState] = useState(1);

  setState(1);

  return <div>Component</div>
}

在此代码中，我直接在组件主体中将状态更新为与之前相同的值。但是，即使值保持不变，这也会导致过多的重新渲染。

据我所知，在 中React.useState，如果状态值更新为与之前相同的值 - React 不会重新渲染组件。那么为什么会发生在这里呢？

但是useEffect，如果我尝试在组件主体中而不是直接在组件主体中执行类似的操作：

const Component = () => {

  const [state, setState] = useState(1);

  useEffect(() => {
    setState(1);
  }, [state])

  return <div>Component</div>
}

这不会导致任何无限循环，并且完全符合如果状态保持不变，React 不会重新渲染组件的规则。

所以我的问题是：为什么当我直接在组件主体中执行此操作时会导致无限循环，而在组件主体中却useEffect不会？

有人对此有一些“幕后”解释吗？

我这里有这个 useEffect 代码：

useEffect(() => {
    if (status === "completed" && !error) 
      props.onAddedComment();
  }, [status,error,props.onAddedComment]);

但我在终端中收到此警告： React Hook useEffect 缺少依赖项：“props”。包含它或删除依赖项数组。但是，当任何prop 更改时，“props”也会更改，因此首选修复方法是在 useEffect 调用之外解构“props”对象，并引用 useEffect 内的那些特定 props

props.onAddedComment如果我传递的是而不是整个 props 对象，为什么需要使用解构？即使我添加了，它仍然会引用整个道具吗.onAddedComment？

params我对这段代码中使用 , 有同样的问题：

useEffect(() => {
    sendRequest(params.quoteId);
  }, [params.quoteId, sendRequest]);

我在这里没有收到此警告，为什么？

简而言之，我的问题是，即使我在.somethingprops 之后添加，我是否应该始终使用解构，以及为什么它不使用参数警告我。

谢谢！

我正在尝试在我的以下代码中使用嵌套路由Router.js：

return (
<Routes>
  <Route path="" element={<Home />} />
  <Route path="/DriverPage/*"  element={<DriverPage />}>
      <Route path="DriverSignUp" element={<DriverSignUp />}/>
      <Route path="DriverLogin" element={<DriverLogIn />} />
  </Route>
  <Route path="/PassengerPage/*" element={<PassengerPage />} />
</Routes>

DriverPage.js这是父路由组件中的代码：

return (
<>     
  <div className="driver-auth">
    <button onClick={ ()=>navigate("DriverSignUp",{replace:true}) }> Sign up </button>
    <button onClick={ ()=>navigate("DriverLogin",{replace:true}) }> Sign in </button>
  </div>
  <Outlet />
</>

问题是我想在单击按钮时用嵌套组件替换父组件，因为我不希望父组件继续显示。

这就是为什么我尝试使用navigate("DriverLogin",{replace:true})但它没有帮助，并且单击时我会看到父路线和子路线。

我认为这是因为/*我在父路由路径中拥有，这意味着即使只是开始匹配它也匹配。

那么，是否有任何解决方案仍然使用嵌套路由，或者我不应该使用嵌套？

还有一个问题是：为什么替换不起作用？

谢谢！