反应:默认上下文值为空
React: Default Context Value is blank
我正在尝试通过上下文设置默认值(我稍后会更新)。但是我似乎无法获得消费者的价值。
我有一个 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>
);
}
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}>
我正在尝试通过上下文设置默认值(我稍后会更新)。但是我似乎无法获得消费者的价值。
我有一个 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>
);
}
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}>