如何解决我是否需要使用useEffect重新渲染组件?
我在更换道具时无法更新组件时遇到问题。我可以使用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来使组件重新渲染以解决问题的正确方法,还是找到了一些解决方案?
谢谢!
解决方法
您的解决方案是正确的。
当您向组件添加状态(即使用useState
)时,组件的属性更改时,该组件将不再自动更新。相反,您必须完全按照代码中的方式使用效果并更新内部状态。
这是一个相关的问题:React.useState does not reload state from props
,您基本上已经“将道具派上了用场”-在这一点上,您负责照顾自己的状态变化。另一种选择可能是让用户编辑的文本具有状态,默认为undefined
,并执行类似value={userText !== undefined ? userText : props.value}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。