使用 Typescript 的 OnChange Void 问题答案

【问题标题】：OnChange Void issue using Typescript使用 Typescript 的 OnChange Void 问题
【发布时间】：2019-11-21 03:47:07
【问题描述】：

我在 React BoilerPlate 上使用 typescript 和 onChange 在选择框上编写了代码，需要更新参数的状态。

我试过initialState传递数据onChange函数，下面是代码

export const initialState = {
  currencyRate: '',
  currencyCode: 'USD',
};

const changeCurrency = (state = initialState, args: any) => {
    produce(state, currency => {
      currency.currencyCode = args.target.value;
    });
    console.log(currencyCode);
  };

<select id="currency" name="currency" onChange={changeCurrency(
                { currencyRate: '', currencyCode: '' },
                null,
              )}
            >

我需要将值 onchange 设置为 currencyCode 状态

下面是错误

TS2322：类型“void”不可分配给类型“（（事件：更改事件）=> 无效）|未定义'

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

为了解释问题，我们应该正确地格式化你的代码：

export const initialState = {
  currencyRate: '',
  currencyCode: 'USD',
};

const changeCurrency = (state = initialState, args: any) => {
  produce(state, currency => {
    currency.currencyCode = args.target.value;
  });
  console.log(currencyCode);
};

return (
  <select
    id="currency"
    name="currency"
    onChange={changeCurrency({ currencyRate: '', currencyCode: '' }, null)}
  >

  </select>
);

如果您仔细观察传递 onChanhe 事件的方式，您会注意到，实际上不是将函数传递给 onChange，而是将函数调用的结果传递给它。让我们重写部分代码以更好地理解它：

const result = changeCurrency({ currencyRate: '', currencyCode: '' }, null);
return (
  <select
    id="currency"
    name="currency"
    onChange={result}
  >

  </select>
);

这正是您的代码所做的，我只为函数调用的结果创建了一个变量。下一步是让您查看函数中实际返回的内容。答案是无或无效，这就是您实际上将无效传递给onChange 的原因。如果您再次阅读错误消息，请考虑此解释：

类型 'void' 不能分配给类型 '((event: ChangeEvent) => void) |未定义')

你会更好地理解它。

最简单的解决方法是将函数传递给 onChange，如下所示：

return (
  <select
    id="currency"
    name="currency"
    onChange={(event) => {
      changeCurrency({ currencyRate: '', currencyCode: '' }, event)
    }}
  >

  </select>
);

【讨论】：

Hi Mehran.. 您的代码解决了我的 void 问题，但在更改时遇到了新问题“Cannot read property 'target' of null”另外，需要打印所选选项的值
@dhawalm 您将 null 传递给函数调用，以解决您必须传递事件而不是 null 的问题。做了一个小改动，再试一次
你确定你的选择都有价值吗？
我也添加了
{currencyCode}
。但是数据是空白的
这可能意味着数据没有正确流入你的道具，或者你没有正确处理你的状态。确保你在你的函数中调用 setState。

【解决方案2】：

export const initialState = {
  currencyRate: '',
  currencyCode: 'USD',
};

// `const...` is equivalent to `function changeCurrency(event: ChangeEvent) {...}`
const changeCurrency = (state = initialState, args: any) => {
  // return a function with expected signature by onChange
  return (event: ChangeEvent): void => {
    produce(state, currency => {
      currency.currencyCode = args.target.value;
    });
    console.log(currencyCode);
  }
};

<select id="currency" name="currency" onChange={changeCurrency(
    { currencyRate: '', currencyCode: '' },
  null,
)}
>

Mehran Hatami 的回答也是正确的，如果不是最好的话。

【讨论】：