反应：将值传递给上下文返回：'TypeError: Right side of assignment cannot be destructured'

Question

我有一个搜索函数，我正试图将其状态提升到父组件中。

然而，在尝试提交表格时，我收到了错误TypeError: Right side of assignment cannot be destructured，并参考了Search.js中的行const {searchValues, setSearchValues} = useContext(SearchContext);。我一直在这个YouTube教程的基础上编写这个代码，当我有多个值要传递和设置时，似乎无法复制功能。

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;

搜索.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;

Answer 1

您应该将要从useContext(SearchContext)检索的值提供给SearchContext.Provider的属性value。

因此，在Body.js:中

…
const searchState = useState({
searchCriteria: "",
resultId: ""
});
return (
<>
<SearchContext.Provider value={searchState}>
<Search />
</SearchContext.Provider>
</> 
);
…

和Search.js:

…
const [searchValues, setSearchValues] = useContext(SearchContext);
…