使用先前状态选项的 Material UI 自动完成

Question

I'm trying to suggest data using the autocomplete component based on 2 queries that fetch data from GraphQL.

    const handleSearchChange = (evt, newInputValue) => {
      const {
        agentsEmail,
        prefix,
        appsName,
        role,
        fromDate,
        toDate,
      } = this.props;
      console.log("handle Search Change")
      this.setState({ userInput: evt.target.value });
      if (newInputValue.length > 0) {
        this.setState({ open: true });
        setTimeout(() => {  this.prepareFilterData(appsName, agentsEmail, prefix, role, fromDate, toDate); }, 500);
      } else {
        this.setState({ open: false });
      }
    }

    const handleSelection = (evt, evtSelection, reason) => {
      console.log(reason, "REASON handle Selection")

      this.setState({ selection: evtSelection });

      /* map over selection and for each element push to listings the element.id
      to build the list of ids to be used by the seearch button handle event */
      this.state.selection.map( (selection) => listings.push(selection.id))
      console.log(this.state.selection, "SELECTION")
    }


    <Autocomplete
            id="listings-filter"
            multiple
            open={this.state.open}
            onOpen={handleOpen}
            onClose={() => this.setState({ open: false })}
            options={filterList}
            limitTags={4}
            groupBy={(option) => option.key}
            disableCloseOnSelect
            onChange={handleSelection}
            onInputChange={handleSearchChange}
            getOptionLabel={(option) => option.value}
            renderOption={(option, { selected }) => (
             <React.Fragment>
               <Checkbox
                 icon={icon}
                 checkedIcon={checkedIcon}
                 style={{ marginRight: 8 }}
                 checked={selected}
               />
             {option.value}
             </React.Fragment>
            )}
            renderInput={(params) => (
             <TextField {...params} label="Search listings by" placeholder="Address, MLS" />
            )}
          />

I'm using a class component, and the options are a list I formatted to allow them to be grouped with the Autocomplete component, but it is always using a previous state of the options. for example: I type ca on the input and it fetches 100 values, but it uses that 100 values when I blur the input which clears the input and it loads the 100 fields. then when I type something else the empty options got loaded. I always need to do +1 change event to got the actual options list, I tried setting to false the clearOnBlur property which didn't solve the issue because since the change event is not fired when blurring the input it never update the state (+1). Any idea what could be causing this? Thanks in advice Here a animated example of my issue:

EDIT: This behavior also happen when deleting the selected options or selecting them, if I select one of the options the change event reflects an empty list, when I select a second one it reflect just the first I selected.

This is the function I use to format and update the filterList I fetch the data with the fetchMls and fetchAddresses then using the mergeFilterData I update the filter list used on the options property

  prepareFilterData = async (appsName, agentsEmail, prefix, role, fromDate, toDate) => {
    await this.fetchMls(appsName, agentsEmail, prefix, role, fromDate, toDate);
    await this.fetchAddresses(appsName, agentsEmail, prefix, role, fromDate, toDate);
    this.setState({
      filterList: mergeFilterData(this.state.fetchedAddresses, this.state.fetchedMls, [])
    });
    console.log(this.state.filterList, "FINAL DATA")
    /* this.setState({
      filteredList: handleListChange(userInput, listingsList, 0.5),
    }); */
  }

EDIT2: Here is one of the functions I use to fetch the data, when the data is fetched is formated and saved on a state to be used.

  fetchMls = async (appsName, agentsEmail, prefix, role, fromDate, toDate) => {
    const enumerationAppName = appsName.map((appName) => appName.enumeration);
    const listAgents = agentsEmail.map((agent) => agent.name || agent);
    console.log(this.state.userInput, "USER INPUT ON FETCH MLS")
    const query = {
      query: GET_LISTINGS_BY_MLS_PREFIX_QUERY,
      variables: {
        appsName: enumerationAppName,
        agentsEmail: listAgents,
        prefix,
        fromDate: formatDate(fromDate),
        toDate: formatDate(toDate),
        mlsPrefix: this.state.userInput || "1",
      },
    };

    applicationClient
      .query(query)
      .then((response) => {
        if (response) {
          if (!isEmpty(response.data.getListingsByMlsPrefix.data)) {
            const result = response.data.getListingsByMlsPrefix.data.map(
              (listing) => listing
            );
            const formatedMls = formatMls(result);
            this.setState({ fetchedMls: formatedMls });
          }
        }
      })
      .catch((err) => {
        this.setState({ fetchedMls: [] });
      });
  };

Answer 1

If you need to process data after state updates, the best way is on callback function:

 const handleSearchChange = (evt, newInputValue) => {
      const {
        agentsEmail,
        prefix,
        appsName,
        role,
        fromDate,
        toDate,
      } = this.props;
      console.log("handle Search Change")
      this.setState({ 
        userInput: newInputValue,
        open: newInputValue > 0
      });
      if (newInputValue.length > 0) {
         setTimeout(() => {  this.prepareFilterData(appsName, agentsEmail,   prefix, role, fromDate, toDate); }, 500);
      }
      
    }

const handleSelection = (evt, evtSelection, reason) => {
  console.log(reason, "REASON handle Selection")
  this.setState({ selection: evtSelection }, ()=> {
      this.state.selection.map( (selection) => listings.push(selection.id))
      console.log(this.state.selection, "SELECTION")
  });

  /* map over selection and for each element push to listings the element.id
  to build the list of ids to be used by the seearch button handle event */

}

I don't know what is in this.fetchMls and this.fetchAddresses functions, but I recommend you to get the data directly, something like this:

 prepareFilterData = async (appsName, agentsEmail, prefix, role, fromDate, toDate) => {
        const fetchedAddresses = await this.fetchMls(appsName, agentsEmail, prefix, role, fromDate, toDate);
        const fetchedMls = await this.fetchAddresses(appsName, agentsEmail, prefix, role, fromDate, toDate);
        this.setState({
          filterList: mergeFilterData(fetchedAddresses, fetchedMls, [])
        }, ()=> console.log(this.state.filterList, "FINAL DATA"));
       
      }

I hope this help you ;)

Answer 2

该问题与材料 UI 组件无关，问题与我正在获取的数据有关，因为我正在获取 3 个不同的查询，我遇到了竞争条件错误，所以我通过使用 Promises.all 解决所有承诺来解决它() 如果对任何人有用 ;)