在另一個組件中重用來自 API 的數據 | 反應

Question

我想從 API 中獲取一些數據，然后在任何地方使用它，甚至在組件之外。 更具體地說，我設法通過 API 獲取了一些數據，並且能夠在調用 fetch 的組件中對其進行一些操作，但是當我在另一個零件？

在Tables.js中，我調用了從 API 獲取並為其創建了一個表。

import React, { useEffect, useState} from 'react';
const Tables = () => {
    const [users, setUser] = useState([]);

    useEffect(() => {
        fetch(TEST_URL)
        .then((res) => res.json())
        .then((data) => {
           setUser(data);
            console.log(data)
        });
    }, []);

    return (
        <div>
            <Table striped bordered hover>
                <thead>
                    <tr>
                        <th>NAME</th>
                        <th>ADDRESS</th>
                    </tr>
                </thead>
                <tbody>
                    {users}.map((m) => (
                        <tr key={m.id}>
                            <td>{m.name}</td>
                            <td>{m.address}</td>
                        </tr>
                    ))}
                </tbody>
            </Table>
        </div>

        
    );
}

export default Tables

API 中的數據如下所示：

[
{
 "id": 1,
 "name": "decster",
 "address": "space",
 "phone": "123"
}
]

現在我有另一個名為TableDetails.js的組件，我想使用 API 中的數據而不重新獲取它，並創建一個表格呈現該數據的不同部分，例如：顯示“姓名”和“電話”來自這次是 JSON 數據。 我該怎么做？

import Tables from "./Tables.js";

function TableDetails() {
    return (
        <div>
            <h2> 
                <Tables Tables {users} = {columns}>
            </h2>
        </div>
    )
}

export default TableDetails

我遇到的另一個小問題是，在獲取Tables.js中的數據后，它會在控制台日志中重復打印兩次數據？ 我對 REACT 和 JS 都非常友好，所以任何提示都會非常有幫助！ 謝謝

Answer 1

console.log運行兩次的事實可能是因為在項目(index.js)的根目錄中使用了React.StrictMode包裝器。

如果您希望API在某處運行並且可以在其他組件中訪問其數據，則需要 state 管理器，例如Redux Toolkit或更簡單的形式，您可以使用useContext 。

在這里，我使用useContext為您的問題編寫了一個解決方案。

創建一個名為DataContext的上下文，並在App組件中，將所有內容包裝在它周圍。 （我在這里使用 jsonplaceholder 假數據）

export const DataContext = createContext();

function App() {
  const [data, setData] = useState([]);
  const callApi = () => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(json => setData(json));
  }
  return (
    <DataContext.Provider value={{data, callApi}}>
      <C1 />
      <C2 />
    </DataContext.Provider>
  );
}

現在callApi function 和data值可以在每個子組件內訪問。 C1使用上下文中的 callApi 調用 getPosts callApi 。

export default function C1() {
    const { callApi } = useContext(DataContext);
    useEffect(() => {
        callApi();
    }, [])
    return (
        <>This is C1 component. It calls the API.</>
    )
}

C2可以從上下文的data值得到API結果。

export default function C2() {
    const { data } = useContext(DataContext);
    return (
        <>
            <div>
                This is C2 it gets API data from DataContext which has been called by C1
            </div>
            {
                data && data.map((post,index) => 
                    <p key={index}> { JSON.stringify(post) } </p>
                )
            }
        </>
    )
}