0

我正在尝试找到一种方法将此代码转换为基于类的组件：

import React, {useEffect} from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { bindActionCreators } from 'redux'
import { addComments } from './state/actions/commentActions'


export default function App() {

    const state = useSelector((state) => state)
    const dispatch = useDispatch()

    const {commentData} = state

    console.log(commentData);

    const add = bindActionCreators(addComments, dispatch)


    useEffect(() =>{
        async function fetchData(){
            const data = await fetch('https://jsonplaceholder.typicode.com/comments?_limit=10').then(data => data.json())
            add(data)
        }

        fetchData()

    }, [])

    const carr = commentData.map(data => <h1>{data.body}</h1>)

    return (
        <div>
            {carr}
        </div>
    )
}

当我第一次学习 redux 时，我没有使用基于类的组件，所以我不知道如何替换除connectHOC 之外的那些钩子，不幸的是我把它们放在了我不能使用它们的位置。那么如何bindActionCreators在基于类的组件上实现呢？

4

1 回答 1

0

我的第一个问题是，您为什么要尝试将函数组件转换为类组件？通常，人们试图将类转换为函数:)

也就是说，要专门回答您的问题：您不必给bindActionCreators自己打电话 -connect将在内部进行：

https://react-redux.js.org/using-react-redux/connect-mapdispatch#defining-mapdispatchtoprops-as-an-object

import { increment, decrement, reset } from './counterActions'

const actionCreators = {
  increment,
  decrement,
  reset,
}

export default connect(mapState, actionCreators)(Counter)
于 2021-07-07T17:50:30.690 回答