Question

我有一个事件处理程序handleChange，因为我有一个父子组件，所以每次下拉都会调用该事件处理程序（总共有5个），即在以下代码段中，从父级调用了该下拉菜单， label和values之类的属性已使用props填充。问题是因为我有一个redux存储，组件多次渲染，并且onchange事件被调用了多次。为了限制渲染，我想使用useCallback，但是依赖关系将基于用户选择的下拉值是否更改。我没有访问依赖项中的事件的问题。

import React, {useCallback} from 'react';
import { makeStyles } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  selectEmpty: {
    marginTop: theme.spacing(2),
  },
}));

export default function SimpleSelect(props) {
  const classes = useStyles();
  const [age, setAge] = React.useState('');

  const handleChange = useCallback (event => {
    setAge(event.target.value);
  }, []);

  return (
    <div>
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-simple-select-label">{props.label}</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          onChange={handleChange}
        >
          {props.values}
        </Select>
      </FormControl>
    </div>
  );
}

如果我没有如上所述放置任何依赖项，则在用户更改值后永远不会调用该事件。仅在初始化和渲染（由系统完成）时调用它。

从下面的代码笔链接中可以看到，即使我从下拉列表中选择了相同的值，也要调用处理程序，并避免了我需要在下拉列表中将值指定为依赖项，

Link

Answer 1

您已正确使用useCallback。该回调的唯一真正依赖项是setAge，它具有useState保证不更改的功能标识，因此很安全。

每次渲染组件时，handleChange函数可以相同，因为如果设置了不同的值，则它不需要做任何不同的事情。只需设置名称值即可。

如果未调用handleChange，则问题可能出在您的<Select>组件中。

反应事件处理程序的“ useCallback”

1 个答案: