问题描述
但是,在尝试提交表单时,出现错误TypeError: Right side of assignment cannot be destructured
并参考const {searchValues,setSearchValues} = useContext(SearchContext);
中的行Search.js
。我一直将此代码基于this YouTube tutorial,当我要传递和设置多个值时,似乎无法复制该功能。
SearchContext.js
import { createContext} from 'react'
export const SearchContext = createContext(null);
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 {SearchContext} from "../contexts/SearchContext"
import {SummaryContext} from "../contexts/SummaryContext"
import {ReferenceContext} from "../contexts/ReferenceContext"
function Body() {
const [searchValues,setSearchValues] = useState({
searchCriteria: "",resultId: ""
});
return (
<>
<SearchContext.Provider values={searchValues} onChange={setSearchValues}>
<Search />
</SearchContext.Provider>
</>
);
export default Body;
Search.js
import React,{useContext,Component} from "react";
import {SearchContext} from "../../contexts/SearchContext"
import "../../App.css"
function handleSubmit(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)
};
export function Search (){
const {searchValues,setSearchValues} = useContext(SearchContext);
return (
<div className="search container center">
<div className="input-group input-group-sm mb-3 center">
<div className="input-group-prepend">
<span className="input-group-text" id="inputGroup-sizing-sm">Wikipedia URL:</span>
</div>
<form onSubmit={(event) => {setSearchValues({searchCritera:event.target.value,resultId:1})}} center>
<input
type="text"
className="form-control center"
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm"
value={searchValues.searchCriteria}
onChange={event => {searchValues.searchCriteria = event.target.value} }
onFocus={() => {setSearchValues({searchCritera:'',resultId:''})}}
placeholder="Add a Url" />
</form>
</div>
</div>
);
}
export default Search;
解决方法
您应该将要从useContext(SearchContext)
中检索的值提供给value
的属性SearchContext.Provider
。
因此,在Body.js中:
…
const searchState = useState({
searchCriteria: "",resultId: ""
});
return (
<>
<SearchContext.Provider value={searchState}>
<Search />
</SearchContext.Provider>
</>
);
…
和Search.js:
…
const [searchValues,setSearchValues] = useContext(SearchContext);
…