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

问题描述

我有一组组件，其中一个是search组件，目前具有自己的状态。搜索时，它将使用匹配项的ID更新其自身的状态。最终，我成为搜索组件，用于在Body组件的状态下更新更多项目。但是，现在有一个好处。

我目前在Provider中使用Body，在Consumer和Title中使用Summary。我在确切地了解如何操作时遇到了问题：

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} 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;

Search.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;

Title.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>

  );
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）