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

编程问答 2022-06-07

问题描述

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

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

每次重新渲染Body时，都会为该值创建一个全新的对象，这意味着即使标头没有更改，每个消费者也需要重新渲染。如果您仅提供标头，我建议您这样做：

<SummaryContext.Provider value={header}>

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

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

// ...
<SummaryContext.Provider value={value}>
reactjsreactjsreactjsreactjsuse-context