功能组件不会在道具更改时重新渲染

Question

在下面的代码中，每当我从父级获得新的 props 时，新的 props 都会正确记录在控制台上，但渲染的 HTML 在初始渲染后永远不会更新：

export default function(props) {
  const [state, setState] = useState(props)
  
  // initially, props.something is defined
  // every time props changes (from the parent) props.something is redefined as expected and logged here
  console.log(props.something)
  
  // initially, props.something is rendered correctly
  // every time props.something changes (from the parent) the HTML never updates
  return (
    {state.something && <div>{state.something}</div>}
  )
} 

我已经尝试过使用

useEffect()

，尽管我没有看到这一点，但它并没有解决任何问题。

Answer 1

状态不会仅仅因为道具改变而更新，这就是你需要

useEffect

的原因。

export default function(props) {
  const [state, setState] = useState(props)

  useEffect(() => {
    setState(props.something)
  }, [props.something])
  
  // initially, props.something is defined
  // every time props changes (from the parent) props.something is redefined as expected and logged here
  console.log(props.something)
  
  // initially, props.something is rendered correctly
  // every time props.something changes (from the parent) the HTML never updates
  return (<div>{state.something}</div>)
} 

将

props.something

添加到数组中作为

useEffect

的第二个参数，告诉它监视

props.something

的更改，并在检测到更改时运行效果。

更新：在这个具体示例中，没有理由将 props 复制到 state，只需直接使用 prop 即可。

Answer 2

在您的示例中，您仅在设置初始值时将 props 复制到 state 一次。

将 props 复制到组件状态几乎从来都不是一个好主意。你可以阅读相关内容react docs

Answer 3

您可能不需要效果来同步道具的状态，请参阅道具更改时重置所有状态。您可以将

key

属性传递给组件，以便每当

key

更改时，React 将重新创建 DOM 并重置组件及其所有子组件的状态

import { useState } from 'react';

const MyComponent = (props) => {
  const [state, setState] = useState(props);
  console.log(props.something);
  return state.something ? <div>{state.something}</div> : null;
};

function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount((count) => count + 1)}>increase</button>
      <MyComponent something={count} key={count} />
    </>
  );
}

export default App;

堆栈闪电战