javascript - 类型错误 : Cannot read property 'value' of null in React Form

Question

我正在开发一个表单，其中有一个仅接受数字或字母的 HTML 输入。我的状态界面的简短形式如下:

interface State {
    location: string;
    startDate: Date;
}

我像这样初始化我的状态:

const [state, setState] = useState<State>({
        location: '',
        startDate: new Date(),
    });

我的 onChangeHandler 如下:

const handleChangeLocation = useCallback((event: ChangeEvent<HTMLInputElement>): void => {
        setState(prevState =>
            update(prevState, {
                location: {$set: event.target.value},
            })
        );
    }, []);

HTML 输入是这样的:

<input id="search-grid-location" className="search-grid-element" type="text"
                           placeholder="Location"
                           onChange={handleChangeLocation}/>

当我写下我。 e.输入1时没有错误，但是当我在第一次输入后写入2时，出现错误。输入字段包含12

错误发生在位置行。请参阅

我调试了应用程序，event.target.value 保存输入值。因此 prevState 变量可能有错误。我使用功能组件。

我使用 immutability-helper 包来更新我的状态。 Link

Answer 1

在调用 setState 之前，您需要获取 event.target.value 的值。当执行 setState 时(特别是因为您使用的是函数式 setState)，React SyntheticEvent 将被清除，因此它的 target 属性将为 null。

useCallback((event: ChangeEvent<HTMLInputElement>): void => {
  // do this and your error will go away
  const {value} = event.target;
  setState(prevState =>
    update(prevState, {
      location: {$set: value},
    })
  );
}, []);

了解有关 SyntheticEvent 的更多信息