我是否需要使用 useEffect 重新渲染组件？答案

【问题标题】：Do I need to use useEffect to rerender a component?我是否需要使用 useEffect 重新渲染组件？
【发布时间】：2020-09-09 16:04:46
【问题描述】：

当组件的道具发生变化时，我在更新组件时遇到了问题。我使用 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？

谢谢！

【问题讨论】：

这个值只是默认值吗？您应该问自己是否需要相同价值的道具和本地状态。如果此组件和父组件都更新了值，那么您可以选择从更新值的父组件传入setValue 函数，而不是在此处具有本地状态。
那么当你点击按钮更新道具时，它没有改变吗？为我工作：blitz

标签： javascript reactjs use-effect use-state

【解决方案1】：

你的解决方案是正确的。

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

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

【讨论】：

这不是真的；添加状态（通过钩子或在类组件中）不会导致渲染行为发生变化。将初始道具复制到舞台会导致“锁定”。
@AKX 谢谢，你能扩展或分享一个链接，让我可以阅读更多内容吗？
我不确定有什么可以诚实地扩展:)

【解决方案2】：

您基本上已经“将 props 分叉到状态”——此时您有责任自己处理状态更改。另一种选择可能是为用户编辑的文本设置状态，默认为undefined，并执行类似value={userText !== undefined ? userText : props.value}的操作

【讨论】：