React Form组件新增校验后报import/export仅允许出现在顶层错误

问题根因 #

• 你的onSubmit回调函数遗漏了闭合的右大括号}，导致后续所有代码都被识别为onSubmit函数的内部内容，最终export default Form语句出现在函数作用域内，违反了ES模块的语法规则，触发了对应报错。

修复方案 #

找到代码中setValid(false)所在的else分支结束位置，补全onSubmit函数的闭合大括号即可，修复后的完整代码如下：

const Form = ({
  valid,
  setValid,
  setStatus,
  inputText,
  setInputText,
  todos,
  setTodos
}) => {
  const inputTextHandler = (e) => {
    console.log(e.target.value);
    setInputText(e.target.value);
  };

  const onSubmit = (e) => {
    e.preventDefault();
    if(inputText){
      setTodos([
        ...todos,
        { text: inputText, completed: false, id: Math.random() * 1000 }
      ]);
      setInputText(""); 
    } else {
      setValid(false)
    }
  }; // 此处补全了onSubmit函数的闭合大括号
  
  const onStatusChange = (e) => {
    setStatus(e.target.value);
  };
  return (
    <form>
      <input
        value={inputText}
        onChange={inputTextHandler}
        type="text"
        className="todo-input"
      />

      {!valid && <span className="error">Please enter a todo</span>}
      <button onClick={onSubmit} className="todo-button" type="submit">
        <i className="fas fa-plus-square"></i>
      </button>
      <div className="select">
        <select onChange={onStatusChange} name="todos" className="filter-todo">
          <option value="all">All</option>
          <option value="completed">Completed</option>
          <option value="uncompleted">Uncompleted</option>
        </select>
      </div>
    </form>
  );
};

export default Form;

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