Блог

Я пытаюсь установить значение по умолчанию через контекст (который я позже обновлю). Однако, похоже, я не могу получить значение у потребителя.

У меня есть SummaryContext файл, который содержит два значения по умолчанию title и summary . Это используется в Body.js и header передается значение. И, наконец Title , файл, который должен отображать одно из значений.

Строка console.log("TITLE.JS: " {title}); в Title.js выводится TITLE.JS: [object Object на консоль.

Я в недоумении относительно того, что я ошибся.

SummaryContext.js

 import { createContext } from 'react'

const header = {
  title: "sdlfkjasdf",
  summary: "kmkmkm"
}

export const SummaryContext = createContext(header);
  

Тело

Строка <WikiHeader > содержит ссылку на файл Title.js , который является файлом, в который я пытаюсь передать эти значения.

 import React, {useState} from "react";
import WikiHeader from './wikiheader/WikiHeader'

import {SummaryContext} from "../contexts/SummaryContext"

function Body() {

    const [header, setHeader] = useState(SummaryContext);

  return (

    <>   
      <SummaryContext.Provider value={{header}}>
        <GoogleAd />
        <WikiHeader />    
      </SummaryContext.Provider>

    </>
  );
}

export default Body;
  

Title.js

 import React, {useContext} from "react"
import {SummaryContext} from "../../../contexts/SummaryContext"
import '../../../App.css'

export function Title() {
  const {title, summary} = useContext(SummaryContext);
  console.log("TITLE.JS: "   {title});

  return (
    <div className="container">
      <div className="detailTitle"><span><h3>The title: {title}</h3></span></div>
    </div>

  );
}
  

 const [header, setHeader] = useState(SummaryContext);
  

Эта строка не делает то, что вы хотите. SummaryContext это объект со Consumer свойством и Provider свойством, каждое из которых является компонентом react. Вы хотите что-то вроде этого:

 const [header, setHeader] = useState({
  title: "sdlfkjasdf",
  summary: "kmkmkm"
})
  

Если вы хотите, чтобы это начальное состояние поступало из файла контекста, вы можете, но вам нужно будет экспортировать его, как в:

 import { createContext } from 'react'

export const defaultHeader = {
  title: "sdlfkjasdf",
  summary: "kmkmkm"
}

export const SummaryContext = createContext(defaultHeader);

// used like:

import { defaultHeader } from "../contexts/SummaryContext"

// ...

const [header, setHeader] = useState(defaultHeader);
  

P.S: эта строка вызовет у вас некоторые проблемы:

 <SummaryContext.Provider value={{header}}>
  

Каждый раз при повторных отправках тела для значения будет создаваться совершенно новый объект, что означает, что каждому потребителю потребуется выполнить повторную отправку, даже если заголовок не изменился. Если заголовок — это единственное, что вы предоставляете, я бы рекомендовал сделать:

 <SummaryContext.Provider value={header}>
  

Или, если вам нужно обернуть его в объект, вы должны запомнить этот объект:

 const value = useMemo(() => {
 return { header };
}, [header]);

// ...
<SummaryContext.Provider value={value}>