小编Tom*_*Vee的帖子

我遇到了一个相当愚蠢的问题.我正在创建我的第一个React应用程序,我遇到了一个小问题,在提交表单后我无法清除输入值.一个尝试谷歌搜索这个问题,在这里发现了一些类似的线程,但我无法解决这个问题.我不想更改组件/应用程序的状态,只是将输入值更改为空字符串.我尝试清除函数中的输入值onHandleSubmit(),但是我收到了一个错误:

"无法设置未定义的属性'值'".

我的SearchBar组件:

import React, { Component } from "react";

class SearchBar extends Component {
  constructor(props) {
    super(props);

    this.state = {
      city: ""
    };

    this.onHandleChange = this.onHandleChange.bind(this);
    this.onHandleSubmit = this.onHandleSubmit.bind(this);
  }

  render() {
    return (
      <form>
        <input
          id="mainInput"
          onChange={this.onHandleChange}
          placeholder="Get current weather..."
          value={this.state.city}
          type="text"
        />
        <button onClick={this.onHandleSubmit} type="submit">
          Search!
        </button>
      </form>
    );
  }

  onHandleChange(e) {
    this.setState({
      city: e.target.value
    });
  }

  onHandleSubmit(e) {
    e.preventDefault();
    const city = this.state.city;
    this.props.onSearchTermChange(city);
    this.mainInput.value = "";
  }
}

export default SearchBar;

我知道这很一般，但我的 Next.js 网站有一个错误，当我在 Safari 中打开我的网站时，它有时加载有时不加载（几乎 50/50 机会 - 显示一个空白页面，但我可以请参阅我的一些组件的轮廓，但没有文字）。它发生在 iOS/macOS 版本的 Safari 上。我读到了Cache-Control在尝试加载页面时显然会导致 Safari 出现问题的标题，但我尝试了这些解决方案，但它们对我不起作用（例如，设置像这样的标题res.header("Cache-Control", "no-cache, no-store, must-revalidate")并添加app.disable('etag')到我的节点服务器）。

在这一点上，我想知道的是造成这种情况的根本原因。它是 React 的东西吗？节点的事？Next.js 或浏览器本身（这是我的猜测，因为所有其他浏览器都没有这个问题）。此外，这不会100％发生也很奇怪。

在localhost这个问题上不会发生。（不同的标题？）

有没有人遇到过同样的问题？欢迎任何反馈。

谢谢。

编辑：所以我设法解决了这个问题。问题是我试图使用从 Adob​​e Fonts 导入的字体。花了 3 天的时间，但是一旦我用标准的 Google 字体替换了字体，一切都开始正常了。希望这能让某人头疼。