在 ReactJS 中使用 props 有条件地渲染 div

Question

我对反应还很陌生，我试图在提交 post 回复后显示一条消息，但它没有显示。

注意：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;

Answer 1

使用 re-render

的状态

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

Answer 2

为了在 React js 中显示任何更新的状态，您必须使用状态来呈现该变量。因为当您在 React 中执行 setState 时，它会自动 re-renders 组件。所以，你可以这样保存你的状态：

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

希望对您有所帮助！！

在 ReactJS 中使用 props 有条件地渲染 div

render a div conditionally using props in ReactJS

jsx

reactjs

react-props