反应：默认上下文值为空

Question

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

我有一个 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>

  );
}

Answer 1

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

这条线没有按照您的要求进行。 SummaryContext 是一个 object 和一个 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 重新渲染，都会为该值创建一个全新的 object，这意味着每个消费者都需要重新渲染，即使 header 还没有'改变了。如果 header 是您提供的唯一内容，我建议您这样做：

<SummaryContext.Provider value={header}>

或者如果您需要将其包装在 object 中，您应该记住 object:

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

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

反应：默认上下文值为空

React: Default Context Value is blank

reactjs

use-context

SummaryContext.js

正文

Title.js