时间戳

首页 > 解决方案 > 当值未定义时，保持输入状态会中断应用程序

javascript - 当值未定义时，保持输入状态会中断应用程序

问题描述

我试图让一个表单工作，它既可以作为项目的创建表单，也可以作为更新表单。我跟踪一个edit状态来决定应该在表单中呈现什么文本以及在提交它时要进行什么 API 调用。到目前为止一切顺利，一切正常。为了跟踪输入值，我使用了一个钩子useInputState来更新相应的状态值：

使用InputState.js

export default (initialVal) => {
  const [value, setValue] = useState(initialVal);
  const handleChange = (e) => {
    if (e.target) {
      setValue(e.target.value);
    } else {        // to be able to set state manually
      setValue(e);
    }
  };
  const reset = () => {
    setValue("");
  };
  return [value, handleChange, reset];
};

const [newTitle, setNewTitle, resetNewTitle] = useInputState();

表单.js

export default function Form({
  newTitle,
  setNewTitle,
  edit, // true or false
}) {
  return (
    <div>
      <h2>{edit ? "Edit Item" : "Add new item"}</h2>
      <div>
        <label>Title</label>
        <input
          type="text"
          placeholder="What is your title?"
          value={newTitle}
          onChange={setNewTitle}
        />
      </div>
  )
}

现在当用户添加一个新项目时，显然表单一开始是空的。但是，当用户想要编辑一个项目时，我会尝试使用给定对象的信息预填充表单。这是我遇到问题的地方：对象模型有一些可选字段。当用户在创建对象时将这些留空时，编辑它会中断应用程序并出现can't read property target of null.

当打开编辑时，我使用以下代码预填充表单字段：

  useEffect(() => {
    if (edit && selectedItem) {
      setNewTitle(selectedItem.title);
    }
  }, [edit]);

我明白它为什么会遇到问题，我尝试了很多事情，比如将 setNewTitle 参数更改为setNewTitle(selectedItem["title"] !== undefined ? selectedItem.title : "");和类似的方法，但到目前为止没有任何效果。

我能做些什么来解决这个问题？

标签： javascriptreactjs

解决方案

如果您等于;似乎您只是在比较selectedItem.title !== undefined可能导致指定错误的情况；有多种方法可以解决此问题，但您可以执行以下操作：selectedItem.titlenull

const handleChange = (e) => {
  if (!!e && e.target) {
    setValue(e.target.value);
  } else {        // to be able to set state manually
    setValue(e);
  }
};

更改如下：if (!!e && e.target)

推荐阅读