小编pg0*_*g07的帖子

这是索引文件，它是任务卡的容器。

import TaskCard from './TaskCard'

export function Task() {
    const tasks = useSelector((state) => state.tasks);
    const dispatch = useDispatch();
    
    const [task,setTask] = useState("");
    const [time,setTime] = useState("");


    function submitTask() {
        let newTask = {
            id: Math.floor(Math.random() * 10000),
            content: task,
            time: time,
            remainingTime: time,
            isRunning: false,
        };
        dispatch(create(newTask));
    }

    return (
        <div>
            <input type="text" onChange={(e) => setTask(e.target.value)}/>
            <input type="number" onChange={(e) => setTime(e.target.value)}/>
            <input type="button" value="submit task" onClick={submitTask} />
            {tasks.map((i) => TaskCard(i))}
        </div>
    );
}

这是TaskCard.js 文件。

import useTimer from '../../hooks/useTimer' …

我在尝试 React 组件时遇到了这个问题。我有一个组件：

window.renderCount=1;

export function Soundscapes() {

    const soundscape = useSelector((s) => s.tasks.soundscape);
    const dispatch = useDispatch();
   
    const [soundscapeAudioElement, setSoundscapeAudioElement] = useState(undefined);
    useEffect(()=>{
        console.log('state just changed to: ', soundscapeAudioElement )
    },[soundscapeAudioElement])

    
    console.log(window.renderCount);
    window.renderCount=window.renderCount+1;

    return (<SomeJSXUnrelatedToQuestion/>)
}

在控制台中，我注意到日志正在1,3,5,7,9随后重新渲染。renderCount我希望它每次在屏幕上增加 1 时都会打印出来1,2,3,4,5，就像每次组件渲染到屏幕上一样。但它似乎在增加它，但不是每次都将其打印到控制台。

我在这里错过了什么吗？

为了提供一些上下文，我尝试使用 redux-toolkit 和 react-redux-firebase 设置我的 React 应用程序（需要 firebase 实时数据库）。

我按照react-redux-firebase自述文件创建了这个文件

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { store } from "./app/store";
import { Provider } from "react-redux";
import * as serviceWorker from "./serviceWorker";
import { initializeApp } from "firebase/app";  
import "firebase/database"; // to enable using firebase RTD
import { ReactReduxFirebaseProvider } from "react-redux-firebase";

const fbConfig = {
    apiKey: "**",
    authDomain: "**",
    projectId: "**",
    storageBucket: "**",
    messagingSenderId: "**",
    appId: "**",
    measurementId: "**", …