React防反弹prop函数未定义

时间:2019-07-17 13:31:31

标签: javascript reactjs

我正在尝试对组件进行反跳,但是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>
  );
});

0 个答案:

没有答案