如何保存我最近用 axios 创建的 firebase 中的数据并做出反应？

Posted 2023-02-22

【中文标题】如何保存我最近用 axios 创建的 firebase 中的数据并做出反应？

【英文标题】：how to save the data from firebase I recently Created with axios and react?

【发布时间】：2021-06-18 05:54:20

【问题描述】：

我对 react 和 web 开发整体来说还是个新手，我想问一下，我的问题出在哪里？ 我用firebase创建了一个数据库，发布到里面很顺利，但是现在我试图获取我之前发布的日期并将其存储到一个变量中，这样我就可以遍历数据并为每个数据映射不同的组件。我用的是axios，代码如下：

function CreateBlog(props) 
   const [fetchedData, setFetchedData] = useState();
    useEffect(() => 
          axios.get("https://diary-page-default-rtdb.firebaseio.com/diaryPages.json")
        .then((response) => 
            console.log(response.data);
            setFetchedData(response.data);
            console.log(fetchedData)
        )
        .catch(error => console.log("error occured:", error))
    , []);

所以当我 console.log 响应.data 时，我得到了带有存储在数据库中的数据的对象，但是当我 setFetchData 和 console.log 时，我得到了未定义的 fechedData。是否有任何简单的方法将“fetchedData”中的数据存储为数组，其中每个不同的对象都代表数组的一部分，以便稍后我可以映射数组并将数据显示在单独的组件中？

【参考方案1】：

您正在正确存储数据，但由于useState 异步操作，您无法立即对其进行控制台记录。

如果您想控制台记录您的fetchedData，请使用 useEffect 监听该状态的变化（用于演示目的）：

useEffect(() => 
  console.log(fetchedData)
, [fetchedData]);

我将给出的进一步建议（虽然不是必需的）是将您的初始状态设置为空数组，因为这是您要存储的数据类型：

const [fetchedData, setFetchedData] = useState([]);

从这里，您可以像这样映射您的数据：

fetchedData?.map((data, index) => <div key=index>data</div>

如果您复制我的示例，请确保 data 不是对象，否则它将返回错误，因为您无法在 jsx 中显示对象