React: Passing values to a context returns: 'TypeError: Right side of assignment cannot be destructured'

Question

我有一个搜索功能，我正在尝试将其状态提升到父组件中。

但是，在尝试提交表单时，我收到错误 TypeError: Right side of assignment cannot be destructured 并参考了 Search.js 中的行 const {searchValues, setSearchValues} = useContext(SearchContext);。我一直将此代码基于 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;

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);
…

React: Passing values to a context returns: 'TypeError: Right side of assignment cannot be destructured'

React: Passing values to a context returns: 'TypeError: Right side of assignment cannot be destructured'

reactjs

use-state

use-context

SearchContext.js

Body.js

Search.js