reactjs - 使用`useContext`时在反应中提升状态

Question

我有一组组件，其中一个是search组件，当前有自己的状态。ID在搜索时，它会使用匹配项的状态更新自己的状态。最终，我作为搜索组件更新了组件状态中的更多项目Body。但现在一个很好。

我目前正在使用一个Provider内部Body和一个Consumer内部Title和Summary。我无法准确理解如何：

答：构造Body组件，以便我可以拥有状态并保留我已声明用于提供程序的常量（如果我需要保留它们）。

B：创建一个回调函数用于Search调用和更新Body状态。

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

正文.js

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;

搜索.js

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;

标题.js

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>

  );
}

标签： reactjsuse-stateuse-context