我正在尝试对组件进行反跳,但是setValue
prop函数在子组件中返回undefined,否则显示正常。
const FormsyInput = React.memo(props => {
const [value, setValue] = useState(props.value);
const useStyles = getStyles(props.sheetType);
const classes = useStyles();
const onChange = event => {
setValue(event.currentTarget.value);
//THIS setValue returns undefined if i debounce in my parent.
props.setValue(event.currentTarget.value);
};
//rest is ommitted
});
我处理数据的父函数:
const WorkExperience = React.memo(props => {
const [workExperienceArr, setWorkExperienceArr] = useState([1]);
const [clinics, setClinics] = useState([]);
const classes = useStyles();
const onAddWorkExperience = () => {
setWorkExperienceArr(
workExperienceArr.concat([workExperienceArr.length + 1])
);
};
const handleValuesA = (index, type) => val => {
let values;
switch (type) {
case 'clinic':
values = [...clinics];
values[index] = val;
setClinics(values);
break;
default:
break;
}
};
//THIS causes undefined
const handleValues = useCallback(_.debounce(handleValuesA, 250), []);
const onRemove = index => event => {
let clinicValues = [...clinics];
clinicValues.splice(index, 1);
let workExperienceArrCopy = [...workExperienceArr];
workExperienceArrCopy.splice(index, 1);
setClinics(clinicValues);
setWorkExperienceArr(workExperienceArrCopy);
};
return (
<Fragment>
{workExperienceArr.map((num, index) => (
<div key={index} style={{ display: 'grid' }}>
{index > 0 ? (
<Button
component="span"
className={classes.removeButton}
onClick={onRemove(index)}
>
Remove
</Button>
) : null}
<div className={classes.inputContainer1}>
<FormsyInput
ref={inputRef}
name={'clinic' + index}
label="Clinic/Hospital name"
value={clinics[index]}
setValue={handleValues(index, 'clinic')}
delegateToParent
required={props.withWorkExperience}
/>
</div>
</div>
))}
</Fragment>
);
});