внутренний HTML работает только один раз в моем приложении для реагирования - PullRequest
Новая
       112

внутренний HTML работает только один раз в моем приложении для реагирования

0 голосов
/ 14 июля 2020

Я пытаюсь очистить свой контейнер div, когда пользователь нажимает кнопку поиска, чтобы все существующие результаты поиска были удалены. Проблема в том, что я использую внутренний HTML для очистки контейнера div, но он работает только в первый раз. Если вы будете искать что-то во второй раз, вы не увидите, что результаты не отображаются. Я только начал изучать reactjs. Вот мой код (я удалил ключ API и идентификатор просто FYI). 

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>
    );
  }
}

Ответы [ 2 ]

0 голосов
/ 15 июля 2020

Я понял это сегодня утром. Это легко сделать с помощью условного рендеринга и тернарного оператора. Всем спасибо.

0 голосов
/ 14 июля 2020

Что вы думаете об использовании для этого нового 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> : <></>;
}
)
}
...