Question

我搜索了网络和各种来源;似乎没有人适用于我的问题。最接近的可能是这个（没有答案）： React + Redux function call

所以：我试图将参数传递给我的一个动作创建者字段，一个名为update的函数，它将确定模糊行是否更改了值，如果是，它将调用我的api进行更新。我希望传递的参数是事件（其中包含我需要的行作为target.ParentElement）和一个整数，它表示我所在州的项目属性中的行的索引。

我的redux商店中的动作创建者：

export const actionCreators = {
    update: (e: React.FocusEvent<HTMLInputElement> | undefined, i: number): AppThunkAction<KnownAction> => (dispatch, getState) => {
        let test = event;
        // Will put logic and api call in here and dispatch the proper action type
    }
}

并尝试这样称呼它：

// Inside a function rendering each row in my form 
...
<input key={project.number} name={name} className='trackerCell' onBlur={(event) => { this.props.update(event, i) }} defaultValue={project.number}/>

其中 i 是索引值，传递给渲染函数。

所有编译都会找到，但是当我执行并进入更新功能时， e 和 i 都是未定义的; 事件已定义，看起来像我希望 e 一样。

FWIW，我在这里尝试的格式在我的应用程序的其他地方起作用：

requestProjects: (programNumber: number, programString: string): AppThunkAction<KnownAction> => (dispatch, getState) => {

当componentWillUpdate（）调用时，正确接收我能够在逻辑中使用的数字和字符串。

奖励：在我用这种方式构建的所有动作创建函数中，参数中有3个对象：调度， getState 和未定义即可。为什么呼叫签名中的参数不显示？我是否以不同的方式思考这些论点？

是的，我知道我可以将索引值附加到输入中的属性中，并且会出现在事件对象中，但这看起来很糟糕，我想真正了解什么是继续在这里。

由于

更新

回应Will Cain的评论：索引变量i从它的父节点传递给行渲染函数，如下：

private renderProjectRow(project: ProjectTrackerState.Project, i: number) {
    let cells: JSX.Element[] = [];
    let someKey = project.number + '_started', name = project.number + '_number';
    cells.push(<input key={project.number} name={name} className='trackerCell' onBlur={ this._handleBlur.bind(this) } defaultValue={project.number}/>);
// Rendering continues down here

这是一个有效的数字类型，直到事件点（我可以告诉我在浏览器中调试）。

更新功能中的事件变量来自..我不知道在哪里？这是我想要解决的一个谜。即使它不是更新函数的已定义参数，但当我输入 update 方法时，事件在调试器中定义如下：

Event {isTrusted: false, type: "react-blur", target: react, currentTarget: react, eventPhase: 2, …}

显然是触发处理程序的事件，但它如何到达更新功能超出了我的范围。

Answer 1

如果有人遇到同样的问题（不太可能，但希望提供帮助），请回答这个问题：

我的参数 e 和 i 在运行时未定义的原因是因为它们未在函数执行中引用。我的猜测（仍在寻找要验证的文档）是typescript清理对未使用参数的引用。从优化的角度来看是有道理的。在更新功能中添加对 e 和 i 的读取引用解决了我的问题。

您可以将"noUnusedParameters": true添加到 tsconfig 文件中的compilerOptions，这将为所有这些参数抛出打字稿错误，以便您可以抓住这些清理工作何时完成

React-Redux：将参数从处理程序传递给动作创建者

1 个答案: