為事件處理程序反應“useCallback”

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>
  );
}

如果我沒有像上面那樣放置任何依賴項，那么在用戶更改值后永遠不會調用該事件。 它僅在初始化和渲染（由系統完成）時被調用。

從下面的codepen鏈接中可以看出，即使我 select 下拉列表中的值相同，並且為避免我需要將下拉列表中的值指定為依賴項，也會調用處理程序，

關聯

Answer 1

您已經正確使用useCallback 。 該回調唯一真正的依賴是setAge ，它有一個 function 標識， useState保證不會改變，所以這是安全的。

每次渲染組件時， handleChange function 可以相同，因為如果設置了不同的值，它不需要做任何不同的事情。 它需要做的就是設置名稱值。

如果未調用handleChange ，則問題可能出在您的<Select>組件中。