Redux和ReactJS钩子：useffect返回空状态

Question

我有一个类组件，它返回使用Redux存储完全填充的状态：

class TopRatedComponent extends Component {
    componentDidMount() {
        this.props.fetchTopRatedMovies();
    }
    render() {

        const IMG_API_ROOT_LINK = 'https://image.tmdb.org/t/p/w500';
        const { topRatedMovies, loading, error } = this.props;
        return (
            <div>
                {loading && <div>LOADING...</div>}
                {error && <div>{error}</div>}
                <Container className="p-4" onScroll={this.onScroll}>

                    <div className="text-center">

                        {
                            topRatedMovies.results && topRatedMovies.results.map(topRated => (
                                <p>{topRated.title}</p>
                            ))
                        }
                    </div>

                </Container>

            </div>
        );
    }
}




const mapStateToProps = state => {
    const { topRatedMovies, loading, error } = state.topRatedMovies;
    return {
        topRatedMovies,
        loading,
        error
    };
};

export default connect(
    mapStateToProps,
    {
        fetchTopRatedMovies
    }
)(TopRatedComponent);

但是，当我将上面的类组件切换到下面的功能组件，以便可以在代码中使用ReactJS钩子时，状态始终为空。

const TopRatedComponent = () => {
      const [count, setCount] = useState(0);
      const [topRated, settopRated] = useState([]);

      useEffect(() => {
        settopRated(this.props.fetchTopRatedMovies)
     }, [this.props.fetchTopRatedMovies])
     
    
  const allState = useSelector((state) => state)
  console.log('CHOF: ' + JSON.stringify(allState));
  return (
    <div>
     WOOOOOOOW....
    </div>
  )
};

Answer 1

箭头函数没有自己的上下文（this变量）。我假设felchTopRatedMovies是一个动作（thunk），它从API获取数据并将其设置为全局状态。在这种情况下，您还需要使用Redux钩子获取数据（如果您使用的版本支持它）。

const TopRatedComponent = ({ fetchTopRatedMovies }) => {
    const [count, setCount] = useState(0);

    // this is written according to your `mapStateToProps` function.
    const { topRatedMovies, loading, error } = useSelector(({topRatedMovies}) => topRatedMovies);

    useEffect(() => {
      fetchTopRatedMovies();
    }, [fetchTopRatedMovies])
    
    if (loading) return 'LOADING...';
    if (error) return <div>{error.message}</div>
     
    return (
      <div>
        etc...
      </div>
    )
};

Answer 2

此在功能组件中的工作方式不同。您需要从函数参数中提取道具。

const TopRatedComponent = (props) => {
      const [count, setCount] = useState(0);
      const [topRated, settopRated] = useState([]);

      useEffect(() => {
        settopRated(props.fetchTopRatedMovies)
     }, [props.fetchTopRatedMovies])
     
    
  const allState = useSelector((state) => state)
  console.log('CHOF: ' + JSON.stringify(allState));
  return (
    <div>
     WOOOOOOOW....
    </div>
  )
};

Answer 3

您没有正确地将基于类的组件转换为等效的功能组件。

以下是功能组件中的问题：

>

在类组件中，您将收到作为道具的fetchTopRatedMoviesaction creator，并从componentDidMount生命周期方法发送它。在functional component中，您并没有分派它。

要在功能组件中分派操作，请使用useDispatch（）hook并在安装组件后使用useffecthook分派此操作。

import React, { useEffect } from "react";
import { useDispatch } from "react-redux";

const TopRatedComponent = () => {
   ...
   const dispatch = useDispatch();

   useEffect(() => {
       dispatch(fetchTopRatedMovies());
   }, []);

   ...
};

在类组件中，可以使用this访问props对象，但在功能组件中，props对象作为参数传递。因此，您可以使用props对象的参数名直接访问它

const TopRatedComponent = (props) => {
   console.log(props);
   // code
};

组件使用mapstatetops函数和connect高阶组件从redux存储中作为道具接收的数据，可以使用功能组件中的useSelectorhook访问。

import { useSelector } from "react-redux";

const TopRatedComponent = () => {
    const { 
       topRatedMovies,
       loading,
       error
    } = useSelector(state => state.topRatedMovies);

    // code
};

注意：您还可以使用连接高阶组件和mapStateToProps将您的功能组件与redux存储连接起来。

有关如何在react-redux中使用钩子的详细信息，请参见：react-redux-Hooks