React中清空文本框后如何重新加载数据？

嘿，作为React新手碰到这个问题太正常啦！我给你两种实用的解决思路，你可以根据自己的需求选择：

方案1：缓存原始数据（推荐，减少重复网络请求） #

这个思路的核心是把首次加载的全部电影数据存在state里做缓存，搜索时只在本地过滤缓存数据，清空搜索框时直接复用缓存的原始数据，不用再发请求，用户体验更流畅。

具体步骤：

• 在组件的state里新增一个originalMovies字段，专门用来存储从接口拿到的全部原始数据
• 修改componentDidMount，把接口返回的数据同时存入originalMovies和用来展示的movies中
• 处理搜索输入逻辑：有搜索词时从originalMovies过滤结果；搜索词清空时，直接把展示用的movies设回originalMovies

修改后的代码示例：

class MovieComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      movies: [],
      originalMovies: [], // 新增：存储全部原始电影数据
      searchTerm: ''
    };
    this.handleSearchChange = this.handleSearchChange.bind(this);
  }

  componentDidMount() {
    fetch('/movies')
      .then((resp) => resp.json())
      .then(movies => {
        this.setState({
          movies: movies,
          originalMovies: movies // 同时缓存原始数据
        });
      })
      .catch((err) => console.log(err));
  }

  handleSearchChange(e) {
    const searchTerm = e.target.value.trim();
    this.setState({ searchTerm });

    if (!searchTerm) {
      // 清空搜索词时，直接复用缓存的全部数据
      this.setState({ movies: this.state.originalMovies });
      return;
    }

    // 根据搜索词过滤原始数据，更新展示列表
    const filteredMovies = this.state.originalMovies.filter(movie => {
      // 这里可以根据你的实际需求调整过滤逻辑，比如匹配电影名、导演等
      return movie.name.toLowerCase().includes(searchTerm.toLowerCase());
    });
    this.setState({ movies: filteredMovies });
  }

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.searchTerm}
          onChange={this.handleSearchChange}
          placeholder="搜索电影..."
        />
        {/* 这里是你的电影列表展示代码 */}
        <ul>
          {this.state.movies.map(movie => (
            <li key={movie._id}>{movie.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

方案2：清空时重新请求接口 #

如果你担心缓存的原始数据可能过期（比如用户搜索期间数据库有更新），或者不想额外存储一份数据，可以把加载数据的逻辑抽成独立方法，清空搜索框时重新调用这个方法拉取最新的全部数据。

具体步骤：

• 把componentDidMount里的fetch逻辑抽成一个fetchAllMovies方法
• componentDidMount初始化时调用这个方法加载数据
• 当搜索词清空时，再次调用fetchAllMovies重新获取全部数据

修改后的代码示例：

class MovieComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      movies: [],
      searchTerm: ''
    };
    this.handleSearchChange = this.handleSearchChange.bind(this);
    this.fetchAllMovies = this.fetchAllMovies.bind(this);
  }

  componentDidMount() {
    this.fetchAllMovies(); // 调用抽离的加载方法
  }

  fetchAllMovies() {
    fetch('/movies')
      .then((resp) => resp.json())
      .then(movies => {
        this.setState({ movies: movies });
      })
      .catch((err) => console.log(err));
  }

  handleSearchChange(e) {
    const searchTerm = e.target.value.trim();
    this.setState({ searchTerm });

    if (!searchTerm) {
      // 清空搜索词时，重新请求全部数据
      this.fetchAllMovies();
      return;
    }

    // 根据搜索词过滤当前展示的电影数据
    const filteredMovies = this.state.movies.filter(movie => {
      return movie.name.toLowerCase().includes(searchTerm.toLowerCase());
    });
    this.setState({ movies: filteredMovies });
  }

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.searchTerm}
          onChange={this.handleSearchChange}
          placeholder="搜索电影..."
        />
        <ul>
          {this.state.movies.map(movie => (
            <li key={movie._id}>{movie.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

简单总结下：方案1更高效，适合数据不会频繁变动的场景；方案2能确保每次都拿到最新数据，但会多一次网络请求，你可以根据自己的业务场景选~

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