Question

我在作出反应和努力学习红色。我想从一个班子里进入该仓库,但给我一个错误,即我无法在班级使用 h。

当我使用该守则时(正如我在YouTube的辅导中看到的那样),该守则没有任何问题。在此,我可以进入仓库中。

 function App() {
      const counter = useSelector(state => state.counter);
    
      return <div>{counter}</div>;
    }

但是,当我想在班级这样做时,这给我留下了一个错误,我可以把hoo花在班上。

因此,我如何能够进入我的仓库,要么使用激光器,要么在班级中使用分机?

Answer 1

如@Ying Zuo所述,贵方的方法只与功能部分有关。解决这一问题:

不是这样:

const counter = useSelector(state => state.counter);

你们界定了这样的反国家:

const mapStateToProps = state => ({
    counter: state.counter
});

Then for dispatching you should use it like this:

const mapDispatchToProps = () => ({ 
    increment, 
    decrement
});

最后,你将一切照样:

export default connect(
    mapStateToProps,
    mapDispatchToProps()
)(App);

Don tabes to importincrement and decrement from the following :>action/code> and link from the react-redux.

Answer 2

useSelector and useDispatch are React Hooks, which only work in function components.

https://reactjs.org/docs/hooks-overview.html#but-what-is-a-hook

大部分部件可以而且应该用功能部分书写。如果你必须写上基于类别的内容,你可使用<代码>脱光/代码>。

https://blogrocket.com/react-redux-link-time-and-how-to-use-it-f2a1edab2013/

Answer 3

class App extends Component {
    constructor(props){
        super(props)
        this.state = {
            reduxState : {}
        }
    }
    DummyView = () => {
        const reducer = useSelector(state => state.reducer)
        useEffect(() => {
            this.setState({
                reduxState : reducer
            })
        }, [])
        return null
    }
    render(){
        return(
            <this.DummyView/>
        )
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 4

使用HOC(高级命令部分),对我来说,这是在班级部分使用hoo灯的最简单方式。

class MyComponent extends React.PureComponent {}

const MyHoc = () => {
   const counter = useSelector();
   return <MyComponent counter={counter} />
}

or there are some cases that you want to select state that accept arguments, you may still use mapState

const mapState = ({state}) => ({
   getComments(post_id) {
      return state.comments.find(cmts => cmts.post_id === post_id)
   }
})

const connector = connect(mapState)(MyComponent)

并通过这一职能消费

const MyHoc = ({post_id, getComments}) => {
   const comments = getComments(post_id)
   const counter = useSelector();

   // and use the comments somewhere
   return <MyComponent counter={counter} />
}
export default connector(MyHoc)

友情链接