小编Eri*_*dán的帖子

我希望console.log('Refresh')每次路由更改时都会运行（从 Component1 切换到 Component2）。但它仅在第一次渲染时触发。为什么？

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));

App.js：

import React, { useEffect } from 'react';
import { Switch, Route } from 'react-router-dom';
import Nav from './Nav';
import Component1 from './Component1';
import Component2 from './Component2';

const App = () => {

  useEffect( () => console.log('Refresh'));

  return (
        [<Switch>
            <Route                            component = {Nav}/>
        </Switch>,
        <Switch>
            <Route exact path = …

我正在尝试实现一个按钮，单击它后将内联样式更改为粗体。我想使用 React Hooks 来实现这个例子。

单击按钮后，RichUtils 正在执行，但不会将文本更改为粗体。我缺少什么？

import React, { useEffect, useRef, useState } from 'react';
import {Editor, EditorState, RichUtils}       from 'draft-js';

const MyEditor = () => {

    const [editorState, setEditorState] = useState(EditorState.createEmpty());
    const editor                        = useRef(null);

    const focusEditor = () => {

        editor.current.focus();

    }

    const boldText = () => {

        let nextState = RichUtils.toggleInlineStyle(editorState, 'BOLD');

        setEditorState(nextState);

    }

    return (
        <div onClick = {focusEditor}>
            <button onClick = { () => boldText()}>Bold</button>
            <Editor
                ref = {editor}
                editorState = {editorState}
                onChange = …

在以前的版本中，我会这样做：

// Declaring db reference
let ref = firebase.database().ref('features')

// Creating the listener
let listener = ref.on('value', snapshot => { 
            
    if(snapshot.val()){
        // Reading data
    }

}

// Unsubscribing
ref.off('value', listener)

在 Firebase 9.0.0 之后，我发现该onValue()函数返回取消订阅回调：

/** A callback that can invoked to remove a listener. */
export declare type Unsubscribe = () => void;

因此，我目前的方法：

/** A callback that can invoked to remove a listener. */
export declare type Unsubscribe = () => void;

我在函数定义中看到该off()函数仍然存在，并且根据文档： …

1. 静态对象

要基于静态对象创建上下文，我使用以下代码：

import React, { createContext } from 'react';

const user = {uid: '27384nfaskjnb2i4uf'};

const UserContext = createContext(user);

export default UserContext;

这段代码工作正常。

2. 动态对象

但是如果我需要在获取数据后创建上下文，我使用以下代码：

import React, { createContext } from 'react';

const UserContext = () => {

    // Let's suppose I fetched data and got user object
    const user = {uid: '18937829FJnfmJjoE'};

    // Creating context
    const context = createContext(user);

    // Returning context
    return context;

}

export default UserContext;

问题

当我调试选项 1 时，console.log(user)返回对象。相反，选项 2console.log(user)返回undefined …