Как показать строку ошибки между тегами типографики

Я хочу показать строку ошибки между тегами типографики, если есть ошибка. Проблема в том, что когда я записываю эту ошибку в консоль, она отображается там, но когда я использую ту же переменную между тегами типографии, она не показывает никакого значения.

Для начала я попытался объявить переменную в методе рендеринга. Затем я вызвал handle_image_error из onChange типа ввода.

handle_image_error = e => {


    if (1) {
      return "Size must be lower than 3MB";
    }
  };
  render() {
    let image_error = 0;
    return (
      <div>
        <input
          accept="image/*"
          type="file"
          id="image_upload"
          style={{ display: "none" }}
          onChange={e => {
            image_error = this.handle_image_error(e);
            console.log("image_error", image_error);
          }}
        />

        <label htmlFor="image_upload">
          <Button variant="contained" color="primary" component="span">
            Upload Photo
          </Button>
        </label>
        <Typography>{image_error}</Typography>
      </div>
    );
  }

Я хочу показать ошибку, возвращаемую функцией handle_image_error, в теге typography. Я изменил условие функции, чтобы она всегда была верной для целей отладки. Вот ссылка на песочницу https://codesandbox.io/s/silly-shape-58ilo или это может быть я не уверен, как поделиться песочницей https://codesandbox.io/s/silly-shape-58ilo?fontsize=14


reactjs material-ui
person Bhaumik Bhatt    schedule 08.08.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward 

import React, { Component } from "react";
import { Button, Typography } from "@material-ui/core";

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
     image_error: 0,
    }
  }
  handle_image_error = e => {
    if (1) {
      return "Size must be lower than 3MB";
    }
  };
  render() {
    return (
      <div>
        <input
          accept="image/*"
          type="file"
          id="image_upload"
          style={{ display: "none" }}
          onChange={e => {
            this.setState({image_error: this.handle_image_error(e)});
            console.log("image_error", this.state.image_error);
          }}
        />

        <label htmlFor="image_upload">
          <Button variant="contained" color="primary" component="span">
            Upload Photo
          </Button>
        </label>
        <Typography>{this.state.image_error}</Typography>
      </div>
    );
  }
}

export default App;

Ваша переменная image_error - это просто локальная переменная с начальным значением 0, поэтому React отображает 0. Теперь вы меняете значение image_error при загрузке изображения, но React не знает, что значение image_error было изменено, и, следовательно, компонент не перерисовывается.
React не отслеживает изменения локальных переменных. Если вы хотите выполнить повторную визуализацию, используйте props или state, поскольку React отслеживает только изменения в них и выполняет повторную визуализацию, когда они меняются.
Следовательно, вам нужно использовать состояние, инициализировать состояние в constructor. Теперь, когда вам нужно обновить состояние, используйте метод this.setState, и React будет знать, когда состояние обновляется. Не назначайте напрямую государству.

person Vaibhav Vishal    schedule 08.08.2019
comment
Я пытаюсь сделать это без использования состояния. Разве это нельзя сделать, используя обычную переменную, предпочтительно в методе рендеринга? - person Bhaumik Bhatt; 08.08.2019
comment
@BhaumikBhatt Я думаю, вы неправильно понимаете, как работает React. React не обновляется на основе измененных переменных экземпляра, только реквизиты и состояние. - person Dave Newton; 08.08.2019
comment
@BhaumikBhatt см. Отредактированный ответ. Если вам не нравится this.state, переключитесь на функциональный компонент и используйте хуки, но это в основном то же, что и состояние, но в функциональном компоненте. - person Vaibhav Vishal; 08.08.2019