反应：默认上下文值为空白答案

【问题标题】：React: Default Context Value is blank反应：默认上下文值为空白
【发布时间】：2020-10-20 14:38:42
【问题描述】：

我正在尝试通过上下文设置默认值（稍后我会更新）。但是我似乎无法在消费者中获得价值。

我有一个SummaryContext 文件，其中包含两个默认值title 和summary。这用于Body.js 和传递的header 值。最后是需要呈现其中一个值的Title 文件。

Title.js 中的console.log("TITLE.JS: " + {title}); 行将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>

  );
}

【问题讨论】：

标签： reactjs use-context

【解决方案1】：

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}}>

每次 Body 重新渲染时，都会为 value 创建一个全新的对象，这意味着每个消费者都需要重新渲染，即使 header 没有更改。如果标题是您提供的唯一内容，我建议您这样做：

<SummaryContext.Provider value={header}>

或者如果你需要将它包装在一个对象中，你应该记住那个对象：

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

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

【讨论】：