Show/hide 基于 React 响应的成功或危险警报

Question

请协助显示 React Bootstrap 基于来自 fetch 的响应消息的警报。我尝试了很多逻辑，但我对 React 的了解似乎达到了极限，尤其是 hooks

下面是我的代码

import React, { useState } from 'react';
import { Alert } from 'react-bootstrap';

我的功能如下所示，

export default (props) => {
  const [invisibleSuccess, setInvisibleSuccess] = useState(false);
  const [invisibleDanger, setInvisibleDanger] = useState(false);
  const [message, setMessage] = useState('');

提交处理程序

 async function submitHandler() {
   fetch("http://example.api.com", requestOptions)
      .then(response => response.json())
      .then(result => {
        switch (result.message) {

          case 'success':
            setInvisibleSuccess(true);
            break;

          case 'error':
            setInvisibleDanger(true);
            break;

          default:
            setMessage(result.message);
        }
      })
      .catch(error => {
        setMessage(error.message);
      }); 
}

和我的警报如下，由于它们的错误状态，它们默认隐藏

return (
<div className="row d-flex justify-content-center">
        <div className="col-sm-12">
          <div className="card">
            <div className="card-details">
              <div className="row d-flex justify-content-center">
                <div className="col-sm-12 text-center">
                   <Alert show={invisibleSuccess} variant="success"><Alert.Heading>Payment made Successfully!</Alert.Heading></Alert>

                   <Alert show={invisibleDanger} variant="danger">
                      <Alert.Heading>Payment Failed!</Alert.Heading>
                          <hr />
                          <p className="mb-0">
                               {message}
                          </p>
                      </Alert>
               </div>
            </div>
          </div>
       </div>
    </div>
</div>
);

Answer 1

我已经构建了这样的警报并且运行良好

import { useState } from 'react';
import { Alert, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
  const [showDangerAlert, setshowDangerAlert] = useState(false);
  const [showSuccessAlert, setshowSuccessAlert] = useState(false);
  const getData = async () => {
    let resp = await fetch('https://jsonplaceholder.typicode.com/todos/2');
    let data = await resp.json();
    // data.completed = true;
    console.log(data);
    switch (data.completed) {
      case false:
        return setshowDangerAlert(true);
      case true:
        return setshowSuccessAlert(true);
      default:
        return alert('no data found regarding this');
    }
  };
  return (
    <div className="App">
      <Button onClick={() => getData()}>fetch todo status</Button>
      <Alert
        show={showDangerAlert}
        variant="danger"
        className="w-25 mt-3 ml-3 "
      >
        This is a error Message
      </Alert>
      <Alert
        show={showSuccessAlert}
        variant="success"
        className="w-25 mt-3 ml-3 "
      >
        This is a success Message
      </Alert>
    </div>
  );
}

export default App;

Show/hide 基于 React 响应的成功或危险警报

Show/hide success or danger alert based on response in React

javascript

fetch

react-bootstrap

bootstrap-4

react-hooks