gpt4 book ai didi

reactjs - Prop 更改不会触发 useEffect

转载 作者:行者123 更新时间:2023-12-04 12:58:59 26 4
gpt4 key购买 nike

我有一个带有 useEffect 的 react 组件,当 Prop 更改时不会触发该组件。我希望这个组件根据 Prop 更新它显示的内容。然而,当 Prop 改变时什么也不会发生。

为了调试,我添加了一个可以手动更新值的按钮,效果很好。我只是无法让 useEffect 为我的生命而运行。

const ReadOnly = (props: WidgetProps) => {
const [value, setValue] = React.useState('No Value');
const { formContext } = props;

const firstName = () => formContext.queryData[0]?.basicInformation?.firstName ?? 'No value';

// This only runs once when the component is first rendered never fired when formContext updates.
React.useEffect(() => {
setValue(firstName());
}, [formContext]);

// This correctly updates the value
const onClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.preventDefault();
setValue(firstName());
};

return (
<>
<p>{value}</p>
<Button onClick={onClick}>Update Value</Button>
</>
);
};

export default ReadOnly;

我尝试更改 useEffect 函数从 formContext 观察的值至 formContext.queryData[0].basicInformation.firstName没有效果。我也试过使用 props反而。我什至尝试完全删除 watch 数组,希望它只是垃圾邮件更新,但没有。

关于我如何实现这一目标的任何建议?我知道该值正在传递到组件,因为它在我按下按钮时起作用。当我在网页上的 React 检查器中查看它时,我可以清楚地看到该值在那里。干杯。

编辑:
该组件被用作 react-jsonschema-form 的小部件。基本上每次都会发生 formData更新了我把它传回 formContext . formContext是我可以将其他数据获取到该小部件的唯一方法。下面是我正在做的事情的精简版。

const [formDataAndIncludings, setFormDataAndIncludings] = React.useState<any>(null);

ClientRect.useEffect(() => {
...
// Initial loading of formDataAndIncludings
...
}, [])

const onChange = (e: IChangeEvent<any>) => {
const newFormDataAndIncludings = { ...formDataAndIncludings };
newFormDataAndIncludings.queryData[0] = e.formData;
setFormDataAndIncludings(newFormDataAndIncludings);
};

return (
<Form
...
onChange={onChange}
formContext={formDataAndIncludings}
...
/>
)

最佳答案

状态正在直接在父级的 onChange 中发生变异。因此你在 ReadOnly 中的 useEffect组件没有被触发。

更新您的 onChange

const onChange = (e: IChangeEvent<any>) => {
setFormDataAndIncludings(prev => ({
...prev ,
queryData : [
e.formData,
...prev.queryData.slice(0,1)
]
}))

//const newFormDataAndIncludings = { ...formDataAndIncludings };
//newFormDataAndIncludings.queryData[0] = e.formData;
//setFormDataAndIncludings(newFormDataAndIncludings);
};

照常提供 useEffect 依赖

React.useEffect(() => {
setValue(firstName());
}, [formContext]);

关于reactjs - Prop 更改不会触发 useEffect,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61927091/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com