class之间的反应道具

Question

我正在做一个react项目，我正在使用不同的类。

我会将一个数值带入另一个 class 的道具中，但它不起作用。

   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 class 中，无论如何我都会收到 60。 即使我更改了RefreshRate ，它也不会发送。 但是，在我的这个 class 的控制台日志中，我可以有很好的输入。 所以，我的setRefreshRate有效。 这怎么可能？

Answer 1

您可以将初始 state 作为第一个参数传递给 useState，如下所示：

const Weather = (props) => {
       const [refreshRate, setRefreshRate] = useState(props.parentRefreshRate);
       ...
}

其中 parentRefreshRate 是您将从父 class 发送的道具值。