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

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

< Сильный > 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;
0
devpato 28 Май 2019 в 07:20

2 ответа

Лучший ответ

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

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}/>
     ...
    );
  }
2
zynkn 28 Май 2019 в 04:28

Чтобы показать любое обновленное состояние в реагировать на 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>
    );
}

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

1
Harshit Agarwal 28 Май 2019 в 06:09