我收到错误：无法读取 null 的属性（读取“值”）。类型错误：无法读取 null 的属性（读取“值”）。我不明白

Question

我正在尝试做词汇测试笔记。下面的代码是关于单词的注册。

interface AddToList {
  en: string;
  ko: string;
}

const [word, setWord] = usetState<AddToList>({
  ko: "";
  en: "";
})

<input
  type="text"
  placeholder="EN"
  onChange={(event: ChangeEvent<HTMLInputElement>) => {
    console.log(event, event.currentTarget, event.currentTarget.value);
    setWord((prev) => ({
      ...prev,
      en: event.currentTarget.value, // << this part might cause error!
    }));
 }}
/>

console.log

返回我输入的内容。但是，我收到错误：无法读取 null 的属性（读取“值”）。类型错误：无法读取 null 的属性（读取“值”）。

所以我尝试像下面这样更改我的代码

interface AddToList {
  en: string;
  ko: string;
}

const [word, setWord] = usetState<AddToList>({
  ko: "";
  en: "";
})

<input
  type="text"
  placeholder="EN"
  onChange={(event: ChangeEvent<HTMLInputElement>) => {
    console.log(event, event.currentTarget, event.currentTarget.value);
    setWord((prev) => ({
      ...prev,
      en: event.currentTarget?.value || "", // << I changed like this
    }));
 }}
/>

但是，在我输入第一个字母之后，

word

的en值变成了“”，这意味着

event.currentTarget?.value

为空或未定义。所以，我尝试了另一种方法。

<input
  type="text"
  placeholder="EN"
  onChange={(event: ChangeEvent<HTMLInputElement>) => {
    const inputValue = event.currentTarget.value;
    setWord((prev) => ({
      ...prev,
      en: inputValue
    }));
 }}
/>

它工作正常。但是，我不知道为什么...

en: event.currentTarget?.value || "",

和

const inputValue = event.currentTarget.value;

有什么区别

Answer 1

你错过了这个。

value={word.en}