javascript - 类之间的 React props
问题描述
我正在做一个react
项目,我正在使用不同的类。
我会将一个数值带入另一个类的道具中,但它不起作用。
const [refreshRate, setRefreshRate] = useState(60);
function changeRefreshRate(e) {
setRefreshRate(e.target.value);
}
let list = [
{
id:'weather',
label:'Weather',
widget:<Weather refreshRate={refreshRate}/>, //not update
checked: false
}
];
console.log(refreshRate)
return(
<div>
<DragDropContext onDragEnd={handleOnDragEnd}>
<Droppable droppableId="widgets">
{(provided) => (
<ul className="widgets" {...provided.droppableProps} ref={provided.innerRef}>
{widgets.map(({id, label, widget, checked}, index) => {
return (
<Draggable key={id} draggableId={id} index={index}>
{(provided) => (
<li ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
<Checkbox id={id} label={label} onChange={_onBoxChecked} />
{checked ? widget : ""}
<div>
<input class="boxnbr" type='number' min='0' onChange={changeRefreshRate}></input>
在我的Weather
课堂上,无论如何我都会收到 60 分。即使我改变了RefreshRate
它也不会发送。但是,在我这个类的控制台日志中,我可以得到很好的输入。所以,我的setRefreshRate
作品。这怎么可能 ?
解决方案
您可以将初始状态作为第一个参数传递给 useState,如下所示:
const Weather = (props) => {
const [refreshRate, setRefreshRate] = useState(props.parentRefreshRate);
...
}
其中 parentRefreshRate 是您将从父类发送的道具值。
推荐阅读
- kubernetes - 如何通过我的 Kubernetes(OpenShift) Ingress 代理外部站点?
- java - 在我删除额外的 -wal 和 -shm 文件之前,应用程序不会读取下载的 Room 数据库文件
- python - python在矩阵二维数组中打印
- ruby-on-rails - Rails ids 返回更多记录
- php - move_uploaded_file() 有问题;($_POST)
- javascript - 自定义排序二维数组
- reactjs - 如何使用 TypeScript 将 useState 道具传递给子组件
- vue.js - 如何在 VuePress v.2.0.0 中添加组件?
- html - 在引导程序 4.6 中设置重叠 div 样式的最佳方法?
- r - 在子集函数 (R) 中指定行位置