React Context API将值传递给子组件不起作用

Question

我是ReactJS和上下文API/钩子的新手。我有一个基本的应用程序，其中父功能组件将值传递给3个按钮。但问题是，我在按钮上看到的是默认值(“欢迎”)，而不是我在上下文中设置的值。

Context.js：

import React, {  useState, useContext, useReducer  } from 'react';

const initalDBStates = {Couchbase:[],MongoDB:[],Cassandra:[], jobId: null, results:[],activeDBName: "Welcome"}

export  const AppContext = React.createContext(initalDBStates);

TestGrid.js：

import React, {  useState, useContext, useReducer  } from 'react';
import DBButton from './DBButton';

import {AppContext} from "./Context";

const TestGrid = () =>  {

  const context = useContext(AppContext)

  const setActiveDBName = (activeDBName) => {
    setDBState({...dbState, activeDBName: activeDBName})
  }

  const [dbState,setDBState] = useState({...context, updateJobId:updateJobId,updateResults:updateResults,setActiveDBName:setActiveDBName })



        return(
            <AppContext.Provider value={dbState}>
            <div class="dls-gray-02-bg pad " style={{height: '100%', minHeight: '100vh',}}>
            <div class="row stack-a">
                <div class="display-inline-block">
                    <DBButton onClick={()=>setActiveDBName("Couchbase")}/>

                    <DBButton onClick={()=>setActiveDBName("Cassandra")}/>

                    <DBButton onClick={()=>setActiveDBName("MongoDB")}/>
                </div>
            </div>

            </div>
            </AppContext.Provider>

    )


}
export default TestGrid;

FInally DBBUtton.js：

import React, { useContext } from 'react';
import {AppContext} from "./Context";

const colors = {"Couchbase":"deep-blue", "MongoDB":"green","Cassandra":"bright-blue"};
function DBButton()   {


        return(
            <AppContext.Consumer>
                {
                    (value) => {
                        let buttonClassName =  "btn btn-contextual dls-" + colors[value.activeDBName];
                        let padClassName = "pad-3 dls-"+ colors[value.activeDBName] + "-bg";
                      return(  
                    <div className="margin-b">
                        <div className={padClassName}>
                            <button className={buttonClassName}>{value.activeDBName}</button>
                        </div>
                    </div>)

                }
                }
            </AppContext.Consumer>
        )


}
export default DBButton;

这3个按钮应该显示Couchbase、Cassandra和MongoDB，但它们显示的是默认的白色和我用来初始化上下文的“欢迎”默认值。有没有人能帮我一下？我不知道我做错了什么！

Answer 1

以下是您的项目当前的工作方式：

您使用"Welcome“作为activeDBName来初始化上下文，并将按钮设置为显示activeDBName的当前值，这就是为什么它们都显示"Welcome”的原因。您正在向每个按钮传递一个方法，该方法将activeDBName的值作为一个名为" onClick“的属性更改，但是按钮组件不使用onClick属性(或任何属性)，因此当您单击按钮时不会发生任何事情。

如果更改代码，使按钮组件将props.onClick作为其onClick属性传递给实际的<button>元素，则单击该按钮将调用setActiveDBName方法并将activeDBName设置为给定值。单击最上面的按钮将把activeDBName更改为"Couchbase"，并且由于按钮组件显示activeDBName的当前值，这将导致所有三个按钮都显示"Couchbase“。如果你点击第二个按钮，所有三个按钮都将显示"Cassandra“。

要让每个按钮显示自己的文本，需要向按钮传递一个道具，告诉它应该显示什么，并在按钮文本中使用该道具。(您还可以使用此属性动态生成按钮的onClick函数。)您还应该在react元素上使用className而不是class。

我假设您还没有包含一些额外的CSS，因为目前唯一应用的样式是在TestGrid的div上的style={{height: '100%', minHeight: '100vh',}}上。

我已经将上面提到的更改放在了一个沙箱中，并提供了一个有效的示例：https://codesandbox.io/s/sweet-kilby-zomb6?file=/src/DBButton.js