Reactjs 反应：默认上下文值为空

我试图通过一个上下文设置一个默认值（稍后我会更新）。然而，我似乎无法获得消费者的价值

我有一个

SummaryContext

文件，其中包含两个默认值

title

和

summary

。这用于

Body.js

和传递的

头

值。最后是一个

标题

文件，需要呈现其中一个值

行

console.log（“TITLE.JS:+{TITLE}）Title.js

中的code>将

Title.js:[object object

打印到控制台

我不知道我做错了什么

SummaryContext.js 身体 行

包含对文件

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;

import React，{useState}来自“React”；
从“./WikiHeader/WikiHeader”导入WikiHeader
从“./contexts/SummaryContext”导入{SummaryContext}
功能体（）{
const[header，setHeader]=useState（SummaryContext）；
返回(
);
}
导出默认体；

Title.js

import React，{useContext}来自“React”
从“../../../contexts/SummaryContext”导入{SummaryContext}
导入“../../App.css”
导出函数标题（）{
const{title，summary}=useContext（SummaryContext）；
log（“TITLE.JS:+{TITLE}）；
返回(
标题：{title}
);
}

此行没有完成您想要的操作。

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);

---

附言：这条线路会给你带来一些麻烦：

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

每次主体重新渲染时，都会为值创建一个全新的对象，这意味着每个消费者都需要重新渲染，即使标题没有更改。如果标题是您提供的唯一内容，我建议您执行以下操作：

<SummaryContext.Provider value={header}>

或者，如果需要将其包装到对象中，则应记住该对象：

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

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

const value=usemo（（）=>{
返回{header}；
}，[标题]；
// ...

此行没有完成您想要的操作。

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);

---

附言：这条线路会给你带来一些麻烦：

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

每次主体重新渲染时，都会为值创建一个全新的对象，这意味着每个消费者都需要重新渲染，即使标题没有更改。如果标题是您提供的唯一内容，我建议您执行以下操作：

<SummaryContext.Provider value={header}>

或者，如果需要将其包装到对象中，则应记住该对象：

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

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

const value=usemo（（）=>{
返回{header}；
}，[标题]；
// ...