如何解决React Memo更新父组件状态
我的组件如下所示
QuestionAnsPage.component(父级)
export interface FieldsDatatype {
id: string | number;
attributeId: string | number,mainQuestionFlg?: boolean;
mainQuestionId: number | string,question: string;
**values: Array<number | string>;**
fieldType: number;
mandatory: boolean;
isNumber: boolean;
pattern?: string;
max?: string | number;
min?: string | number;
displayInline?: boolean;
error?: boolean;
message?: string;
options: OptionsType[] | undefined | null;
storedColumn?: string;
storedJson?: string;
}
type Props = {
data?: FieldsDatatype[];
country: string;
handleOnConfirmClick: (data: FieldsDatatype[]) => void;
handleOnCancelClick: () => void;
isLoading?: boolean;
errorMessage?: Error;
id: string | number;
}
const QuestionAnsPageComponent = (props: Props): JSX.Element => {
const [data,setData] = useState([]);
useEffect(() => {
if (props.data) {
setData(props.data);
}
},[props.data]);
.
.
..
}
QuestionAnswer.componet(儿童)
type Props = {
data: FieldsDatatype;
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
onChangeSelect?: (id: string | number,value: string | number) => void;
onDateChange?: (fieldName: string | number,value: string) => void;
onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLButtonElement | HTMLTextAreaElement>) => void;
country: string;
}
const QuestionAnswerComponent = (props: Props): JSX.Element => {
function comparisonForRerender(prevProps: Props,nextProps: Props): boolean {
console.log('nextProps:',nextProps.data.values,nextProps.data.id);
console.log('prevProps:',prevProps.data.values,prevProps.data.id);
const nextValArr = [...nextProps.data.values];
const prevValArr = prevProps.data ? [...prevProps.data.values] : [];
const nextValuesLen = nextValArr.length;
const prevValuesLen = prevValArr.length;
if (nextValArr
&& prevValArr
&& nextValuesLen > 1
&& nextProps.data.fieldType === FIELDS_TYPE.CHECKBOX) {
return (nextValuesLen === prevValuesLen
&& JSON.stringify(prevValArr) === JSON.stringify(prevValArr));
} else if (nextValArr
&& prevValArr
&& nextValuesLen > 0
&& prevValuesLen > 0
&& nextProps.data.id === prevProps.data.id) {
**return (prevValArr.includes(nextValArr[0]));**
}
return false;
}
}
export default React.memo(QuestionAnswerComponent,comparisonForRerender);
我正在使用此React.memo来提高性能。我想在“ props.data.values” (此字段的类型为Array
我正在尝试在像这样的函数中比较props.data.value:(prevValArr.includes(nextValArr [0]))
但是此函数导致一些奇怪的行为,我的父组件状态有些重置为旧值(在这种情况下为数据)。
我不确定,但是此比较功能会以某种方式更改我的父组件状态。 如果我删除此功能,则它工作正常。
解决方法
您的父组件正在更新,因为props.data
是一个数组。
useEffect
函数的依赖项数组中仅检查数组的指针,您需要比较数组中每个元素的值,或者选择其他依赖项变量,例如数组。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。