我有一个类组件,它返回使用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>
)
};
箭头函数没有自己的上下文(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>
)
};
此
在功能组件中的工作方式不同。您需要从函数参数中提取道具。
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>
)
};
您没有正确地将基于类的组件转换为等效的功能组件。
以下是功能组件中的问题:
>
在类组件中,您将收到作为道具的fetchTopRatedMovies
action creator,并从componentDidMount
生命周期方法发送它。在functional component中,您并没有分派它。
要在功能组件中分派操作,请使用useDispatch()
hook并在安装组件后使用useffect
hook分派此操作。
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存储中作为道具接收的数据,可以使用功能组件中的useSelector
hook访问。
import { useSelector } from "react-redux";
const TopRatedComponent = () => {
const {
topRatedMovies,
loading,
error
} = useSelector(state => state.topRatedMovies);
// code
};
注意:您还可以使用连接
高阶组件和mapStateToProps
将您的功能组件与redux存储连接起来。
有关如何在react-redux
中使用钩子的详细信息,请参见:react-redux-Hooks
我遇到一个问题,React路由器无法使用hook获取参数。当转到路由时,(浏览器路径包括basename),控制台.log()在这里记录一个空对象,,它应该在这里显示例如 看看这个例子https://reacttraining.com/react-router/web/api/Hooks/useparams 这应该行得通。
我还是ReactJs的初学者。实际上我想重写我的类组件来钩住组件,但是我的代码有一部分有问题。有人能帮我把这个组件重写成钩子吗? 这是我的代码:
我通常使用getBoundingClientRect()。宽度当开发一个Swiper组件使用反应挂钩,但在一些例子getBoundingClientRect()。宽度返回0。 我在useEffect函数中使用了setTimeout,效果很好; 下面是简单的swiper代码演示: 简单swiper演示代码
我没有在FabricJS事件中获得更新的状态值,如object:modified、mouse:up等。。。但我可以在回调函数中设置状态值。 当我试图获取状态值时,它返回的是初始值,而不是更新后的值。 例子: 初始值为0。我使用setCount将值更新为1。每当我试图在回调函数中获取“count”时,它都返回0或初始值。 编辑: 我试图实现的是,每当对象修改(对于撤销,重做操作)时,我试图保存Fab
我是打字稿的新手。我需要得到的子状态值的父使用ref上的按钮点击更新的减速器值。 我已尝试将传递给孩子,但我得到的错误与此类似: 类型{value:string;onChange:Dispatch 属性“ref”不存在于类型“IntrinsicatAttributes”上 父组件 子组件
当您通过提交表单调用API请求时,如何设置Axios响应?我想从/在POST方法中发送表单,并获得API响应,然后用API响应重定向到/result页面。我的代码在下面,它引发 警告:无法对卸载的组件执行React状态更新。 这是一个no-op,但它表示应用程序中存在内存泄漏。 若要修复,请取消useEffect清理函数中的所有订阅和异步任务。在家(在app.js:21) 完成handleSubm