对于React Prop Drilling，为什么我只能传递一个状态参数，而不能同时传递State和State Sett

Question

这只是我在使用和学习React时试图理解的一个简单概念问题，但为什么我只能通过Prop Drilling发送一个状态参数？这是如果我使用UseState或XState平台。我不知道这是否与此有关，但通常我在包含状态映射的主文件中的另一个文件中有JSX创建函数，我一直在用Typescript来做。

例如：

interface Myprops { mystate:any, setState:any};
const CreateMyJSX = ({mystate, setState, ...props}:Myprops) => {
console.log(mystate)
console.log(setState)
if(mystate.matches("StateA"))
{
setState("goToStateB");
return(<> <div className="MyCrazyADiv" /></>
}
else
return(<><div className="BtierDiv" /></>)
}
export default function App() {
const [mystate, setState] = useMachine(aRandomXStateMachineIincluded);
return(<>
<CreateMyJSX mystate={mystate} setState={setState} />
</>);
}

当我运行这样的程序时，我会得到一个错误，这是因为，正如setState的控制台日志所示，setState为null。同时，mystate的控制台日志仍然会说"；StateA"；或者它应该做的任何事情。如果我切换顺序(或者一起删除setState(，那么当mystate为null时，另一个会工作。现在，我一直在使用Context来解决这个错误，但如果我只深入挖掘一两个函数，我宁愿只支持钻。

有人能帮我更好地理解这一点吗？我没有在网上看到这个问题，也没有在文件中谈到这个问题的局限性，所以我只是运气不好吗？我正在Chrome中测试这个，但我在firefox和safari中得到了相同的结果。我知道我一定误解了一些事情。

谢谢你的帮助！

Answer 1

您可以检查xstate React示例

您可以尝试在事件处理程序中添加React状态更改，如按钮点击

const [state, send] = useMachine(toggleMachine);
...
<button onClick={() => send("TOGGLE")}>