Javascript 反应挂钩状态变化不'；不要用合适的道具通过

我有一个使用挂钩的React应用程序。我希望我的

插槽

状态在道具中传递给我的其他组件。但是，我的另一个组件只返回

未定义的

，并且在

插槽

更改时不会触发道具更改

应用程序：

import React，{useState，useffect}来自“React”
从'react dom'导入{render}
从“Pusher js”导入Pusher
从“./components/SlotMachine”导入SlotMachine
常量应用=（）=>{
const[slot，setslot]=useState（{}）；
常量推进器=新推进器（'XXXXXXX'{
集群：“xxx”，
加密：真
});
const channel=pusher.subscribe（'my-channel'）；
channel.bind（'my-event'，data=>{
log（`gotdatafromspusher${data}`）；
设置批次（数据）；
控制台日志（数据）；
});
useffect（（）=>{
log（`Slots with channel changes:${Slots}`）；
控制台日志（插槽）；
**//显示了它的变化！但似乎并没有真正传递到SlotMachine组件的道具中**
}，[插槽]）
返回(
);
};
render（，document.getElementById（'root'））；

SlotMachine组件：

import React, { useEffect, useRef, useState } from 'react'
import './slots.css'

function rnd(min, max) {
  return Math.floor(Math.random() * (max - min)) + min
}

//slots is a prop as an array of three
//check if slots is empty or if button is clicked
const SlotMachine = (props) => {
    const ringElements = useRef();
    const [rings, updateRings] = useState([]);
    const [manual, buttonClick] = useState(true);
    const [ slots, setSlots ] = useState(props.slots);

    const slotMap = {
      0: 360,
      1: 120,
      2: 180,
      3: 240,
      4: 300,
      5: 0
    };

    //shows up as undefined when first renders but doesn't show up ever again 
    useEffect(() => {
      console.log(`props changed: ${props.slots}`)
      console.log(props.slots);
    }, [props]);

    useEffect(()=>{
      console.log(`Props Change: ${props.slots}`);
      if(props.slots !== undefined ) {
        console.log(`API Hit: ${props.slots}`);
        buttonClick(false);
        setSlots(props.slots);
        rotate()
      }
    }, [props.slots]);

    const rotate = () => { ... }, [rings]); //not important rn

    useEffect(() =>  { ... }, [ringElements]);

    return(
      <div>
        <div className="slots">
        <div className="rings" ref={ringElements}>
          <div className="ring">
            <div className="slot" id="0">60</div>
            <div className="slot" id="1">120</div>
            <div className="slot" id="2">180</div>
            <div className="slot" id="3">240</div>
            <div className="slot" id="4">300</div>
            <div className="slot" id="5">360</div>
          </div>
          <div className="ring">
            <div className="slot" id="0">0</div>
            <div className="slot" id="1">1</div>
            <div className="slot" id="2">2</div>
            <div className="slot" id="3">3</div>
            <div className="slot" id="4">3</div>
            <div className="slot" id="5">4</div>
          </div>
          <div className="ring">
            <div className="slot" id="0">0</div>
            <div className="slot" id="1">1</div>
            <div className="slot" id="2">2</div>
            <div className="slot" id="3">3</div>
            <div className="slot" id="4">3</div>
            <div className="slot" id="5">4</div>
          </div>
        </div>
      </div>
      <button className="spin-button" onClick={() => { buttonClick(true); rotate();} }>SPIN</button>
    </div>

  );
}

export default SlotMachine

import React，{useffect，useRef，useState}来自“React”
导入“./slots.css”
功能rnd（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min））+min
}
//插槽是一个三个阵列的道具
//检查插槽是否为空或是否单击了按钮
const SlotMachine=（道具）=>{
const ringElements=useRef（）；
常量[rings，updateRings]=useState（[]）；
const[手动，按钮点击]=使用状态（真）；
const[slot，setslot]=使用状态（道具插槽）；
常数slotMap={
0: 360,
1: 120,
2: 180,
3: 240,
4: 300,
5: 0
};
//第一次渲染时显示为未定义，但不再显示
useffect（（）=>{
log（`props changed:${props.slots}`）
控制台日志（道具插槽）；
}[道具]；
useffect（（）=>{
log（`Props Change:${Props.slots}`）；
如果（道具插槽！==未定义）{
log（`API Hit:${props.slots}`）；
按钮点击（假）；
固定槽（道具槽）；
轮换
}
}，[props.slots]）；
常量rotate=（）=>{…}，[环]；//不重要
useffect（（）=>{…}，[ringElements]）；
返回(
60
120
180
240
300
360
0
1.
2.
3.
3.
4.
0
1.
2.
3.
3.
4.
{buttonClick（true）；rotate（）；}}>旋转
);
}
导出默认SlotMachine

您正在将

插槽作为名为
道具的道具传递下去：

<SlotMachine props={slots}/>

您将作为名为
props
的道具向下传递
slot
：

<SlotMachine props={slots}/>

您需要将插槽订阅调用移动到useEffects内部，这是一个副作用，您需要触发组件的重新加载。您需要将插槽订阅调用移动到useEffects内部，这是一个副作用，您需要触发组件的重新加载。LOL！天啊！我怎么会错过呢。我知道我的大脑在想什么！非常感谢。英雄联盟天啊！我怎么会错过呢。我知道我的大脑在想什么！非常感谢。
<SlotMachine slots={slots}/>