innerHTML 在我的反应应用程序中只工作一次答案

【问题标题】：innerHTML works only once in my react appinnerHTML 在我的反应应用程序中只工作一次
【发布时间】：2020-07-14 16:45:38
【问题描述】：

我要做的是在用户点击搜索按钮时清除我的容器 div，以便删除所有现有的搜索结果。问题是我正在使用 innerHTML 来清除容器 div，但它只适用于第一次。如果您第二次搜索某些内容，您将看到没有呈现任何结果。我刚开始学习reactjs。这是我的代码（我已经删除了 API 密钥和 ID，仅供参考）。

import React from "react";
import Recipe from "./Recipe";
import "./styles.css";



export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      searchQuery: "Icecream",
      searchData: [],
      error: false,
      loader: false
    };

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  handleSubmit(e) {
    e.preventDefault();

    document.querySelector(".control.field").classList.add("is-loading");

    this.setState({
      error: false,
      loader: true
    });

    document.querySelector(".columns").innerHTML = "test";

    fetch(
      `https://api.edamam.com/search?q=${
        this.state.searchQuery
      }&app_id=id&app_key=key`
    )
      .then(response => response.json())
      .then(data => {
        this.setState({
          searchData: data.hits
        });
      })
      .catch(err => {
        this.setState({
          error: true
        });
      })
      .finally(() => {
        document.querySelector(".control.field").classList.remove("is-loading");
        this.setState({
          loader: false
        });
      });
  }

  renderIngredients = arr => arr.map((el, index) => <li key={index}>{el}</li>);

  render() {
    let result;

    result = this.state.searchData.map((el, index) => (
      <Recipe
        key={index}
        image={el.recipe.image}
        title={el.recipe.label}
        ingredients={this.renderIngredients(el.recipe.ingredientLines)}
      />
    ));

    return (
      <div>
        <form className="px-3 py-3" onSubmit={this.handleSubmit}>
          <div className="field is-grouped">
            <p className="control field is-expanded">
              <input
                className="input is-rounded"
                type="text"
                placeholder="Find a recipe"
                name="searchQuery"
                value={this.state.searchQuery}
                onChange={this.handleChange}
              />
            </p>
            <p className="control">
              <button className="button is-primary">Search</button>
            </p>
          </div>
        </form>
        {this.state.loader ? (
          <div className="spinner-box">
            <div className="three-quarter-spinner" />
          </div>
        ) : (
          ""
        )}
        {this.state.error ? (
          <div className="px-3 py-3">
            <div className="notification is-danger">
              Some error occured. Unable to fetch
            </div>
          </div>
        ) : (
          <div className="columns is-multiline px-3 py-3 is-mobile">
            {result}
          </div>
        )}
      </div>
    );
  }
}

配方组件：

import React from "react";

export default class Recipe extends React.Component {
  render() {
    return (
      <div className="column is-one-quarter-desktop is-half-mobile">
        <div className="card">
          <div className="card-image">
            <figure className="image is-4by3">
              <img src={this.props.image} alt="" />
            </figure>
          </div>
          <div className="card-content">
            <p className="title is-6">{this.props.title}</p>
            <ul>{this.props.ingredients}</ul>
          </div>
        </div>
      </div>
    );
  }
}

【问题讨论】：

在 React 中，如果你想访问 DOM 元素，你可以使用 refs。阅读有关它们的信息。我不知道这是否会导致您的问题，但无论如何您都应该使用 ref。
没有理由在反应中使用 DOM 方法。按照反应的方式去做。你不应该用 DOM 添加删除类，你不应该用 DOM 设置 html。

标签： javascript html reactjs react-native react-redux

【解决方案1】：

您对为此使用新的state 有何看法？我的意思是：

this.state = {
 ...,
 focusSearch: false
}

const handleFocus = () => {
   this.setState({ ...this.state, focusSearch: true});
}


<input
                className="input is-rounded"
                type="text"
                placeholder="Find a recipe"
                name="searchQuery"
                value={this.state.searchQuery}
                onFocus={this.handleFocus}
                onChange={this.handleChange}
              />


render() {
 return (
  {
 focusSearch ? <div></div> : <></>;
}
)
}

【讨论】：

【解决方案2】：

我今天早上想通了。使用条件渲染和三元运算符可以轻松完成。谢谢大家。

【讨论】：