无法使用数组更新反应状态

Question

我可以成功调用 getApiSuggestions 并返回数据。但是我无法将其分配给我的州。

如您所见，我的控制台输出显示 response 的值有一个数组。但是，当尝试将其分配给 wikiResults:response 时，数组仍然为空。

的修改

我是否试图错误地传递变量？

NarrativeSearch.js

import React, {useContext, useState, useEffect} from "react";
import './search.css'
import { ReactSearchAutocomplete } from 'react-search-autocomplete'
import { getApiSuggestions } from '../../requests/requests';
import {TextSearchContext} from "../../contexts/TextSearchContext"
import {SearchContext} from "../../contexts/SearchContext"



function Search() {
    const {textFilterState, setTextFilterState} = useContext(TextSearchContext);
    const [wikiTitleResults, setWikiTitleResults] = useState({wikiResults:[]});




    var cnJson = wikiTitleResults;

  const items = wikiTitleResults.wikiResults;

    const handleOnSearch = (string, results) => {
        console.log("STRING: ", string)
        getApiSuggestions(string).then(response => {

            console.log("RESPONSE: ", response);
            setWikiTitleResults({wikiResults:response});  //<---- This doesn't update the state
            console.log("WikiTitle: ", wikiTitleResults.wikiResults);
            console.log("Items: ", items);

        })


    }

  const handleOnHover = (result) => {
    // the item hovered
    console.log(result)
  }

  const handleOnSelect = (item) => {
    // the item selected
        setTextFilterState({textFilter:item.name});
    console.log(item)
  }

  const handleOnFocus = () => {
    console.log('Focused')
  }

    const handleOnClear = () => {
    setTextFilterState({textFilter:""});
  }

  const formatResult = (item) => {
        return (
      <>
        <span style={{ display: 'block', textAlign: 'left' }}>id: {item.title}</span>

      </>
    )
  }

  return (
    <div >

        <div className="searchbar">
                <ReactSearchAutocomplete
                    items={items}
                    onSearch={handleOnSearch}
                    onHover={handleOnHover}
                    onSelect={handleOnSelect}
                    onFocus={handleOnFocus}
                    onClear={handleOnClear}
                    styling={{ zIndex: 4 }} // To display it on top of the search box below
                    autoFocus
                />
        </div>

    </div>
  )
}

export default Search

getApiSuggesetions

const getApiSuggestions = (title) => {
    //console.log("URL Being called"+ urlSingleResult);
    //console.log(title);
    let result = urlMultiResult
        .get(`${title}`)
        .then((response) => {
            console.log(Object.values(response.data.query.pages))
            return Object.values(response.data.query.pages);
        })
        .catch((error) => {
            return error;
            console.log(error);
        });
    console.log(result);
    return result;
};

Answer 1

我通过从父组件中包含一个 useEffect 和一个 context 来解决这个问题。

function Search() {
    const {textFilterState, setTextFilterState} = useContext(TextSearchContext);
    const {wikiTitleResults, setWikiTitleResults} = useContext(SearchContext);

    var items = wikiTitleResults.wikiTitles;

    useEffect(() => {
                const fetchData = async () => {
                    const data = await getApiSuggestions(textFilterState.textFilter)
                    setWikiTitleResults({wikiTitles:data})
                }
                fetchData();
                },

             [textFilterState])

    const handleOnSearch = (string, results) => {
        setTextFilterState({textFilter:string});
    }

无法使用数组更新反应状态

Unable to update react state with an array

search

autocomplete

reactjs

NarrativeSearch.js

getApiSuggesetions