我需要使用 useEffect 来重新渲染组件吗？

Question

当 props 发生变化时，我在更新组件时遇到了问题。我使用 useEffect 让它工作，但不确定这是否是解决我的问题的正确方法。这是我的代码：import * as React from "react";import "./styles.css";const InputWithDefaultValue = (props: any) => {  const { value } = props;  //had to add this to get my component to rerender when the button in App-Component was pressed  React.useEffect(() => {    setText(value);  }, [value]);  const [text, setText] = React.useState(value);  return (    <input      value={text}      onChange={(e) => setText(e.currentTarget.value)}    ></input>  );};export const App = () => {  const [value, setValue] = React.useState("Foo");  return (    <div className="App">      <InputWithDefaultValue value={value} />      <button onClick={() => setValue(Math.random().toString())}>Update</button>    </div>  );};export default App;我在想，当我更新InputWithDefaultValue的道具时，它会被重新渲染。是使用 useEffect 让组件重新呈现解决问题的正确方法，还是我找到了一些 hacky-solution？

Answer 1

您的解决方案是正确的。

当您向组件添加状态（即 with useState）时，组件将不再在其 props 更改时自动更新。相反，您必须使用效果并更新内部状态，就像您在代码中所做的那样。

这是一个相关的问题：React.useState does not reload state from props

Answer 2

你基本上已经“将 props 分叉到状态中”——此时你负责自己处理状态变化。另一种选择可能是undefined默认为用户编辑的文本设置状态，然后执行类似value={userText !== undefined ? userText : props.value}