class之间的反应道具

Question

I'm working on a react project, and I'm using different classes.

I would bring a number value into a props for another class but it doesn't work.

   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> 

In my Weather class I receive 60 in any case. Even if I change my RefreshRate it is not sent. But, in my console log of this class, I can have the good input. So, my setRefreshRate works. How is it possible?

Answer 1

You can pass your initial state as first argument to useState like this:

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

where parentRefreshRate is the prop value which you would send from the parent class.