如何從 reactjs 中的異步請求中獲取數據並將其添加到 React-bootstrap Modal

Question

如何在每次打開網站時添加 React-bootstrap 模式，model 應始終在中心彈出詳細信息並帶有關閉 model 的選項。 我正在從異步請求中獲取數據現在，如果在我的 json 數據中，如果“顯示”為真，則僅顯示從 json 到 p 標簽的“數據”嘗試了這種方法，但它在關閉按鈕時失敗

我嘗試了這種方法，它失敗了會拋出錯誤

 const handleClosed = () => setItems(items.map(item => {return item.show = false}));
TypeError: items.map is not a function

const Modals = (props) => {

    useEffect(() => {
      fetchItems();
    },[])

    const [items, setItems] = useState([]);

    const fetchItems = async () => {
      const data = await fetch("url");
      const item = await data.json();
      setItems(item);
    }

    const handleClosed = () => setItems(items.map(item => {return item.show = false}));

    return (
      <div>

       <Modal
          show={items.show}
          onHide={handleClosed}
          size="lg"
          aria-labelledby="contained-modal-title-vcenter"
          centered
        >
          <Modal.Header closeButton>
              <Modal.Title id="contained-modal-title-vcenter">
                 <b>Public Notice</b> 
      </Modal.Title>
          </Modal.Header>
          <Modal.Body>
              <p>
              {items.show}
              </p>
          </Modal.Body>
          <Modal.Footer>
              <Button onClick={handleClosed}>Close</Button>
          </Modal.Footer>
      </Modal>

     </div>
    );
  };

  export default Modals;

Answer 1

帶有[]的初始化項目將修復錯誤：

const [items, setItems] = useState([]);

Answer 2

您將無法在物品上使用 map。 項目 object 從 fetch 返回 API 不是數組。

您可以將項目初始化為 object。

 const [items, setItems] = useState({});

您可以直接使用 items.show 和 items.data。

Answer 3

我剛剛解決了

const Modals = (props) => {

    useEffect(() => {
      fetchItems();
    },[])

    const [items, setItems] = useState([]);

    const fetchItems = async () => {
      const data = await fetch("url");
      const item = await data.json();
      setItems(item);
    }

    const handleClosed = () => setItems(items.show = false}));

    return (
      <div>

       <Modal
          show={items.show}
          onHide={handleClosed}
          size="lg"
          aria-labelledby="contained-modal-title-vcenter"
          centered
        >
          <Modal.Header closeButton>
              <Modal.Title id="contained-modal-title-vcenter">
                 <b>Public Notice</b> 
      </Modal.Title>
          </Modal.Header>
          <Modal.Body>
              <p>
              {items.show}
              </p>
          </Modal.Body>
          <Modal.Footer>
              <Button onClick={handleClosed}>Close</Button>
          </Modal.Footer>
      </Modal>

     </div>
    );
  };

  export default Modals;