React Context API, передача значений дочерним компонентам не работает

Question

Я новичок в ReactJS и Context API / Хуки. У меня есть приложение basi c, в котором родительский функциональный компонент передает значения 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;

В конце концов 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, но вместо этого они показывают белый цвет по умолчанию и значение по умолчанию «Welcome», которое я использовал для инициализации контекста. Может кто-нибудь, пожалуйста, помогите мне с этим? Не могу понять, что я делаю не так!

Answer 1

Вот как ваш проект в настоящее время работает:

Вы инициализируете контекст с "Welcome" в качестве activeDBName, и кнопки настроены на отображение текущего значения activeDBName, поэтому все они показывают " Добро пожаловать». Вы передаете метод, который меняет значение activeDBName в качестве реквизита, называемого onClick, для каждой кнопки, но компонент кнопки не использует реквизит onClick (или любые реквизиты), поэтому при нажатии кнопок ничего не происходит. .

Если вы измените свой код так, чтобы компонент кнопки передавал props.onClick фактическому элементу <button> в качестве его свойства onClick, нажатие кнопки вызовет метод setActiveDBName и установит для activeDBName указанное значение. Нажатие самой верхней кнопки изменит значение activeDBName на «Couchbase», и, поскольку компонент кнопки отображает текущее значение activeDBName, это приведет к тому, что на всех трех кнопках отобразится «Couchbase». Если вы нажмете вторую кнопку, на всех трех кнопках отобразится «Кассандра».

Чтобы каждая кнопка отображала свой собственный текст, вам нужно передать реквизит кнопке, чтобы сказать ей, что она должна показывать, и использовать эта опора в тексте кнопки. (Вы также можете использовать эту опору для динамического генерирования функций onClick кнопок.) Вы также должны использовать className вместо class на ваших реагирующих элементах.

Я предполагаю, что есть некоторые дополнительные CSS у вас есть не включены, поскольку в настоящее время применяется только один стиль, применяемый к style={{height: '100%', minHeight: '100vh',}} в div в TestGrid.

Я собрал изолированную программную среду, показывающую упомянутые выше изменения, с рабочим примером: https://codesandbox.io/s/sweet-kilby-zomb6?file= / SRC / DBButton. js