javascript - React Hooks 状态更改没有通过适当的道具传递
问题描述
我有一个使用钩子的 React 应用程序。我希望我的slots
状态在道具中传递给我的其他组件。但是,我的其他组件只是返回undefined
并且在更改时不会触发道具slots
更改。
应用程序:
import React, { useState, useEffect } from 'react'
import { render } from 'react-dom'
import Pusher from 'pusher-js'
import SlotMachine from './components/SlotMachine'
const App = () => {
const [ slots, setSlots ] = useState({});
const pusher = new Pusher('XXXXXXX', {
cluster: 'xxx',
encrypted: true
});
const channel = pusher.subscribe('my-channel');
channel.bind('my-event', data => {
console.log(`Got data from pusher ${data}`);
setSlots(data);
console.log(data);
});
useEffect(()=>{
console.log(`Slots with channel changes: ${slots}`);
console.log(slots);
**//shows it changes! BUT doesn't seem to actually pass down into props of SlotMachine component**
}, [slots])
return(
<div>
<SlotMachine props={slots}/>
</div>
);
};
render(<App />, document.getElementById('root'));
老虎机组件:
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
解决方案
slots
您正在作为一个名为的道具传递props
:
<SlotMachine props={slots}/>
您需要将其传递为slots
:
<SlotMachine slots={slots}/>
推荐阅读
- excel - 在另一列不为空的情况下自动填充 excel 列
- python - 熊猫日期时间对象的奇怪行为
- amazon-web-services - 授权安全组出口规则时出错:InvalidGroup.NotFound
- java - 如何从 servlet 将重定向发送到位于 WEB-INF 目录下的错误页面?
- swagger - Swashbuckle.AspNetCore + Blazor - 在运行时动态添加/删除自定义 .css 文件
- snowflake-cloud-data-platform - ADF 错误中的雪花 ODBC 连接器 - ODBC 查询无效
- visual-studio - Visual Studio:如何关闭“字符串定义”弹出窗口/工具提示
- mongoengine - 我正在使用 pydantic 来验证具有 NewVehicle 嵌套列表的 NewOwner,但出现以下错误
- excel - 如果我缓慢调试,Excel VBA 代码在调试模式下完美运行,但是当我运行它或使用颜色数据分析快速调试时无法正常工作
- python - 如何将 sqlalchemy 查询过滤到所有符合 Flask 表单条件的父母(不带孩子)和所有父母