Компонент не отвечает в React - PullRequest
Новая
       21

Компонент не отвечает в React

0 голосов
/ 06 января 2019

У меня проблемы с одним из моих компонентов. В моей программе у меня есть компонент App, который является родительским компонентом. В нем есть компоненты, называемые Button и Inputs. В моей программе вы должны нажать одну из кнопок, которые отображаются функцией renderButtons (), чтобы смонтировать компонент Inputs. Когда нажата одна из кнопок, запускается функция onSubmit () и одновременно выполняется функция createTextBoxes (). В двух словах, onSubmit () изменяет ключ «index» в состоянии, и когда createTextBoxes () понимает, что «index» изменился, он монтирует компонент Inputs.

Код App.js показан ниже: 

import React, { Component } from "react";
import "./App.css";
import Button from "./Button";
import Inputs from "./Inputs";
class App extends Component {
  state = {
    index: "",
    buttons: [
      { value: "Algebra 2 Honors", classes: "primary" },
      { value: "British Literature", classes: "success" },
      { value: "Chemistry Honors", classes: "danger" },
      { value: "Modern European History", classes: "warning" },
      { value: "Spanish II", classes: "secondary" },
      { value: "Health Upper School", classes: "info" }
    ],
    textBoxes: [
      {
        identification: "Algebra 2 Honors",
        categories: [
          { Homework: 25 },
          { Notebook: 5 },
          { Quizzes: 20 },
          { Tests: 50 }
        ]
      },
      {
        identification: "British Literature",
        categories: [{ Assessments: 90 }, { Participation: 10 }]
      },
      {
        identification: "Chemistry Honors",
        categories: [
          { Homework: 25 },
          { Labreports: 34 },
          { Quizzes: 10 },
          { Tests: 31 }
        ]
      },
      {
        identification: "Modern European History",
        categories: [
          { Homework: 30 },
          { Participation: 10 },
          { Quizzes: 20 },
          { Tests: 40 }
        ]
      },
      {
        identification: "Spanish II",
        categories: [
          { Participation: 25 },
          { Projects: 25 },
          { Tests: 15 },
          { Assessments: 35 }
        ]
      },
      {
        identification: "Health Upper School",
        categories: [
          { Project: 33.333 },
          { Participation: 33.333 },
          { Quizzes: 33.333 }
        ]
      }
    ]
  };

  renderButtons = () => {
    var list = [];
    for (var i = 0; i < this.state.buttons.length; i++) {
      const id = this.state.buttons[i].classes;
      list.push(
        <Button
          key={id}
          className={id}
          value={this.state.buttons[i].value}
          eventHandler={() => this.onSubmit(id)}
        />
      );
    }
    return list;
  };

  onSubmit = id => {
    const buttonType = id;
    var index = null;
    if (id === "primary") {
      index = 0;
    } else if (id === "success") {
      index = 1;
    } else if (id === "danger") {
      index = 2;
    } else if (id === "warning") {
      index = 3;
    } else if (id === "secondary") {
      index = 4;
    } else if (id === "info") {
      index = 5;
    }
    console.log("The button that has been clicked has an index of " + index);
    this.setState({ index });
  };

  createTextBoxes = () => {
    if (this.state.index !== "") {
      const index = parseInt(this.state.index);
      const indexPhrase = this.state.textBoxes[index];
      console.log(indexPhrase);
      return <Inputs teamState={indexPhrase} />;
    } else {
      console.log("Wait for the click of a button");
    }
  };

  render() {
    return (
      <div className="App">
        <link
          rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
          crossOrigin="anonymous"
        />
        <script
          src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
          integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
          crossOrigin="anonymous"
        />
        <script
          src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
          integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
          crossOrigin="anonymous"
        />
        <script
          src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
          integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
          crossOrigin="anonymous"
        />
        <h1 className="text-white">
          <u>Subject Grade Calculator!</u>
        </h1>
        <br />
        <br />
        {this.renderButtons()}
        {this.createTextBoxes()}
        {/* {this.resetIndex()} */}
      </div>
    );
  }
}
export default App;

Код Button.js показан ниже: 

import React, { Component } from "react";
import "./App.css";

class Button extends Component {
  state = {
    class: "btn btn-" + this.props.className,
    value: this.props.value,
    eventHandler: this.props.eventHandler
  };

  render() {
    return (
      <div className="App">
        <link
          rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
          crossorigin="anonymous"
        />
        <script
          src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
          integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
          crossorigin="anonymous"
        />
        <script
          src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
          integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
          crossorigin="anonymous"
        />
        <script
          src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
          integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
          crossorigin="anonymous"
        />
        <input
          type="button"
          name="0"
          value={this.state.value}
          className={this.state.class}
          onClick={this.state.eventHandler}
        />
      </div>
    );
  }
}

export default Button;

Наконец, вот код Inputs.js: 

import React, { Component } from "react";
import "./App.css";

class Inputs extends Component {
  state = {
    title: this.props.teamState.identification,
    caption:
      "Enter your information below when the text boxes prompt you to do so:"
  };

  render() {
    return (
      <div className="App">
        <link
          rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
          crossorigin="anonymous"
        />
        <script
          src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
          integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
          crossorigin="anonymous"
        />
        <script
          src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
          integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
          crossorigin="anonymous"
        />
        <script
          src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
          integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
          crossorigin="anonymous"
        />
        {console.log(this.state.object)}
        <br />
        <br />
        <h3 className="text-white">{this.state.title}</h3>
        <br />
        <h4 className="text-white">{this.state.caption}</h4>
        <br />
        <br />
      </div>
    );
  }
}

export default Inputs;

Это работает нормально, однако, если вы снова нажмете на другую кнопку, новый компонент Inputs с другими свойствами не будет смонтирован.

Может кто-нибудь объяснить, почему createTextBoxes () не меняет отображаемый компонент, и как я могу это сделать?

1 Ответ

0 голосов
/ 07 января 2019

Конечно, будучи новичком, я не особо задумывался о хуках жизненного цикла и других доступных функциях. Все, что мне нужно было сделать, это использовать функцию componentWillReceiveProps (), которая позволяла бы React обновлять состояние, когда новые реквизиты доставляются в сам компонент Inputs. Вот обновленный код для компонента Inputs: 

import React, { Component } from "react";
import "./App.css";

class Inputs extends Component {
  state = {
    title: this.props.teamState.identification,
    caption:
      "Enter your information below when the text boxes prompt you to do so:"
  };

  componentWillReceiveProps(nextProps) {
    if (this.props !== nextProps) {
      this.setState({ title: nextProps.teamState.identification });
    }
  }

  render() {
    return (
      <div className="App">
        {console.log(this.state)}
        <br />
        <br />
        <h3 className="text-white">{this.state.title}</h3>
        <br />
        <h4 className="text-white">{this.state.caption}</h4>
        <br />
        <br />
      </div>
    );
  }
}

export default Inputs;

Я удалил ссылки начальной загрузки, jquery и popper по запросу или предложению пользователя jonrsharpe. Однако эта функция не будет доступна в 17-й версии React, поэтому вместо нее рекомендуется использовать UNSAFE_componentWillReceiveProps (). Вот ссылка, откуда я выяснил эту информацию: 1 Спасибо!

...