Reactjs 使用“useContext”时react中的提升状态`

我有一组组件，其中一个是

search

组件，当前有自己的状态。搜索时，它用匹配项的

ID

更新自己的状态。最终，我成为了搜索组件，以更新

Body

组件状态中的更多项目。但现在有一个是好的

我目前在

正文中使用
提供者
，在
标题和
摘要中使用
消费者
。我在准确理解如何：

A:构造
Body
组件，这样我就可以拥有状态并保留我声明用于提供程序的常量（如果我需要保留它们的话）

B:为
Search
创建一个回调函数，以调用和更新
Body
状态

└── src/
    └── COMPONENTS/
        ├── Body.js
        │
        ├── SEARCH/
        │   └── Search.js
        │
        └── WIKIHEADER/
            ├── WikiHeader.js
            │
            └── COMPONENTS/
                ├── Summary.js
                └── Title.js

Body.js
import React，{useState}来自“React”；
从“./WikiHeader/WikiHeader”导入WikiHeader
从“./WikiReference/WikiReference”导入WikiReference
从“./Search/Search”导入搜索
从“./GoogleAd/GoogleAd”导入GoogleAd
从“./contexts/SummaryContext”导入{SummaryContext}
从“./上下文/ReferenceContext”导入{ReferenceContext}
功能体（）{
const[wikiHeader，setWikiHeader]=useState（'Hello from context'）；
const[wikiReference，setWikiReference]=useState（'Hello from context'）；
返回(
);
}
导出默认体；

Search.js
import React，{Component}来自“React”；
导入“../../App.css”
类搜索扩展组件{
状态={
搜索条件：“”，
结果：0
}
handleSubmit=异步（事件）=>{
event.preventDefault（）；
//取（'http://127.0.0.1:5002/events/search/“+this.state.searchCriteria）
取（'https://gist.githubusercontent.com/TheMightyLlama/e0ab261b30b7c957930b8eac29813180/raw/f39ea1323762b9dd796db7370a73f1a727e12566/gistfile2.txt')
.then（res=>res.json（））
.然后（（结果数据）=>{
这是我的国家({
resultId:resultsData
})
console.log（resultsData）；
})
.catch（console.log）
};
render（）{
返回(
维基百科网址：
this.setState（{searchCriteria:event.target.value}）placeholder=“按事件标题搜索”/>
);
}
}
导出默认搜索；

Title.js
import React，{useContext}来自“React”
从“../../../contexts/SummaryContext”导入{SummaryContext}
导入“../../App.css”
导出函数标题（）{
const{wikiHeader，setValue}=useContext（SummaryContext）；
返回(
{wikiHeader}
);
}

import React, {useState} from "react";
import WikiHeader from './wikiheader/WikiHeader'
import WikiReference from './wikireference/WikiReference'
import Search from './search/Search'
import GoogleAd from './googlead/GoogleAd'

import {SummaryContext} from "../contexts/SummaryContext"
import {ReferenceContext} from "../contexts/ReferenceContext"

function Body() {

    const [wikiHeader, setWikiHeader] = useState('Hello from context');
    const [wikiReference, setWikiReference] = useState('Hello from context');
  return (

    <>
      <SummaryContext.Provider value={{wikiHeader, setWikiHeader}}>
        <Search />
        <WikiHeader />
        <GoogleAd />

      </SummaryContext.Provider>
      <ReferenceContext.Provider value={{wikiReference, setWikiReference}}>
        <WikiReference />
      </ReferenceContext.Provider>

    </>
  );
}

export default Body;

import React, {Component} from "react";

import "../../App.css"

class Search extends Component {
  state = {
    searchCriteria: '',
    resultId:0
  }

  handleSubmit = async (event) => {
    event.preventDefault();

    //fetch('http://127.0.0.1:5002/events/search/'+this.state.searchCriteria)
    fetch('https://gist.githubusercontent.com/TheMightyLlama/e0ab261b30b7c957930b8eac29813180/raw/f39ea1323762b9dd796db7370a73f1a727e12566/gistfile2.txt')
    .then(res => res.json())
    .then((resultsData) => {

      this.setState({
        resultId: resultsData
      })

      console.log(resultsData);
    })
    .catch(console.log)

  };

  render() {

    return (
      <div className="search container">
        <div className="input-group input-group-sm mb-3">
          <div className="input-group-prepend">
            <span className="input-group-text" id="inputGroup-sizing-sm">Wikipedia URL:</span>
          </div>
          <form onSubmit={this.handleSubmit}>
          <input type="text" className="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" value={this.state.searchCriteria} onChange={event => this.setState({ searchCriteria: event.target.value })} placeholder="Search by event title" />

          </form>

        </div>
      </div>
    );
  }
}
export default Search;

import React, {useContext} from "react"
import {SummaryContext} from "../../../contexts/SummaryContext"
import '../../../App.css'

export function Title() {
  const {wikiHeader, setValue} = useContext(SummaryContext);

  return (
    <div className="container">
      <div className="WikiPageTitle"><span><h3>{wikiHeader}</h3></span></div>
    </div>

  );
}