当Redux存储其他已更改的数据时，React Hooks useEffect会多次调用

Question

我的代码如下：

信息组件：

import {
 getAttachData,
} from '@src/actions/creators/account'
 
const Info: React.FC = () => {
  const info = useSelector<any, Account>(state => state.getIn(['account', 'info']).toJS())
  const list = useSelector<any, Data[]>(state => state.getIn(['account', 'list']).toJS())
  const attach = useSelector<any, AttachData[]>(state => state.getIn(['account', 'attach']).toJS())
  ...
  
  const handleChange = ({ select }) => {
    dispatch(getAttachData({v: select}))
  }
  
  const Template = (params) => {
    return (
     <div>
       <BaseSelect onChange={(val) => handleChange(val)} list={list} />}
     </div>
    )
  }
  
  return (
    ...
    <Template data={info} />
    {attach.map((child, cidx) => (<Template data={child} />))}
  )
}

export default Info

BaseSelect组件：

const BaseSelect: React.FC<Props> = props => {
  const [selectId, setSelectId] = useState('')
  const { list } = props
  
  useEffect(() => {
    if (!isEmpty(list)) {
      ...
    }
    console.log('init')
  }, [])

  const handleChange = (value) => {
    setSelectId(value)
    
    props.onChange({
      select: value,
    })
  }
 
  return (
    <Select
      data={list}
      value={selectId}
      onChange={handleChange}
    />
  )
}

export default BaseSelect

当在BaseSelect组件中执行handleChange事件时，props.onChange函数将在info组件中调用handleChange事件，并调度http请求getAttachData来更改Redux存储中的附加数据，但是BaseSelect组件中的useEffect也将执行，并且在控制台中打印两次“ init”。

控制台：

Answer 1

这是因为每次Redux存储更改时，您的Template组件都会重新创建。

只需将Template组件移到Info组件之外。