визуализировать div с помощью реквизита в ReactJS - PullRequest
Новая
       30

визуализировать div с помощью реквизита в ReactJS

0 голосов
/ 28 мая 2019

Я очень новичок, чтобы реагировать, и я пытаюсь показать сообщение после того, как отправил ответное сообщение, но оно не отображается.

Примечание: ответ POST работает правильно.Сообщение должно отображаться, когда статус в app.js обновляется.Похоже, что значение status передается только один раз, когда страницы отображаются в первый раз.

APP.JS 

class App extends Component {
  status = null;
  submit = async values => {
    const response = await providers.post('/providers/', {
      params: {
        values
      }
    });
    this.status = response.status;
    if (this.status === 200) {
      this.getInitialValues();
      this.myFormRef.reset();
    } else {
      console.log('ERROR: There was an error creating a new Provider');
    }
  };

  render() {
    return (
      <div className='registration-form ui container'>
        <img src={logo} alt={logo} />
        <h1>New Provider Form</h1>
        <Form
          onSubmit={this.submit}
          initialValues={this.getInitialValues()}
          ref={el => (this.myFormRef = el)}
        />
        <Status status={this.status} />
      </div>
    );
  }

STATUS.JS 

import React from 'react';
const Status = props => {
  console.log(props.status);
  if (props.status === 200) {
    return <div className='status'>Provider Successfully Registered!</div>;
  } else if (props.status > 200) {
    return <div className='status'>ERROR: Couldn't register new provider</div>;
  } else {
    return null;
  }
};

export default Status;

Ответы [ 2 ]

2 голосов
/ 28 мая 2019

Использовать состояние для повторного рендеринга 

class App extends Component {
  state = {
    status: '',
  };
  submit = async values => {
    const response = await providers.post('/providers/', {
      params: {
        values
      }
    });
    this.setState({
      status: response.status,
    });
    //this.status = response.status;
    if (response.status === 200) {
      this.getInitialValues();
      this.myFormRef.reset();
    } else {
      console.log('ERROR: There was an error creating a new Provider');
    }
  };
  render() {
    return (
     ...
     <Status status = {this.state.status}/>
     ...
    );
  }
1 голос
/ 28 мая 2019

Чтобы показать любое обновленное состояние в реагирующих js, вы должны отобразить эту переменную, используя состояние. Потому что, когда вы выполняете setState в реакции, он автоматически перерисовывает компонент. Таким образом, вы можете сохранить свой статус в таком состоянии: 

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      status: '',
    };
  }

submit = async (values) => {
    const response = await providers.post('/providers/', {
      params: {
        values
      }
    });
    this.setState({status: response.status},()=>{
       if (this.state.status === 200) {
         this.getInitialValues();
         this.myFormRef.reset();
       } else {
         console.log('ERROR: There was an error creating a new Provider');
       }
    });

  };
render() {
    return (
      <div className='registration-form ui container'>
        <img src={logo} alt={logo} />
        <h1>New Provider Form</h1>
        <Form
          onSubmit={this.submit}
          initialValues={this.getInitialValues()}
          ref={el => (this.myFormRef = el)}
        />
        <Status status={this.state.status} />
      </div>
    );
}

Надеюсь, это поможет !!

...