反应 Redux - 错误：无效的挂钩调用。 钩子只能在 function 组件的主体内部调用

Question

I want to use the useSelector() hook but I'm getting the error mentioned above. Where can I use this hook to get access to my state data?

function RetrieveDataSources() {
  var dataSources = useSelector(state => state.dataSourcesReducer);
  console.log(dataSources);
}

class Data extends Component {
  constructor(props) {
    super(props);
    this.state = {
      errorMessage: false,
      isLoading: true,
      resultData: propsState && propsState.resultData,
    };


    RetrieveDataSources();
  }

 
  render() {
    return( some return code );
         }
}


export default Data;

Answer 1

Hooks can only be called in either a function component, or custom hooks. You are calling it from a normal function instead hence the error.

Furthermore, it seems you want to call a hook from a class component - that's unfortunately not directly supported. If you have to use class components, consider using mapStateToProps & connect apis instead to get it from your redux store.

If you still prefer to use hooks from within class component, here is an example to use function component and React render props to share it back with the parent component. This is usually done by libraries though where people cannot dictate whether the caller is using function component or class component.