React中修改State对象单个键值报错：Cannot read properties of null

这个错误的核心原因是React合成事件的池化机制：React会复用事件对象，在事件处理函数执行完成后，会把事件对象的属性重置为null。而setState的更新回调是异步执行的，当回调触发时，原来的事件对象已经被回收，所以访问event.target就会抛出Cannot read properties of null的错误。

你的chng函数没报错只是偶然情况，本质上和chgd存在同样的风险，正确的修复方式是提前从事件对象中提取需要的值，再在setState回调中使用：

const chng = event => {
  // 先提取value，保存到局部变量
  const selectedGame = event.target.value;
  setOtp(prevValues => {
    return { ...prevValues, opts: selectedGame };
  });
};

const chgd = event => {
  const selectedDay = event.target.value;
  setOtp(prevValues => {
    return { ...prevValues, das: selectedDay };
  });
};

修改后的完整代码如下：

import React, { useState } from "react";

const options = ["cricket", "football", "hockey"];
const days = ["weekday", "weekend"];

function App() {
  const [otp, setOtp] = useState({ opts: "", das: "" });

  const chng = event => {
    const selectedGame = event.target.value;
    setOtp(prevValues => {
      return { ...prevValues, opts: selectedGame };
    });
  };

  const chgd = event => {
    const selectedDay = event.target.value;
    setOtp(prevValues => {
      return { ...prevValues, das: selectedDay };
    });
  };

  return (
    <div className="App">
      <h1>Which game</h1>
      {options.map(value => (
        <div key={value}>
          <input
            type="radio"
            name="options"
            id={value}
            value={value}
            onChange={chng}
          />
          <label htmlFor={value}>{value}</label>
        </div>
      ))}
      <h1>Which Day</h1>
      {days.map(value => (
        <div key={value}>
          <input
            type="radio"
            name="days"
            id={value}
            value={value}
            onChange={chgd}
          />
          <label htmlFor={value}>{value}</label>
        </div>
      ))}
      <p>Will Play {otp.opts} on {otp.das}</p>
    </div>
  );
}

export default App;

另外，你之前在chgd里加的if (event.target && event.target.value)判断没有实际作用——判断是同步执行的，但setState回调是异步的，当回调执行时event.target已经被重置为null了，所以提前提取值才是根本解决方法。

内容的提问来源于stack exchange，提问作者D3VZ