无法通过受控props从父组件控制Downshift的selectedItem属性

我帮你梳理了这个问题的核心：你封装的Autocomplete组件没有完全采用受控模式，导致Downshift内部的状态和父组件传入的selectedItem没有同步，所以父组件传入null时组件没响应。下面是具体的解决方案：

步骤1：改造Autocomplete为完全受控组件 #

首先要让组件接受父组件传入的selectedItem和对应的回调函数，并且把selectedItem直接传递给Downshift的useCombobox hook，确保外部能控制选中状态。如果需要同时控制输入框内容，也可以把inputValue和对应的回调加进去：

import React from 'react';
import { useCombobox } from 'downshift';

const Autocomplete = ({
  items,
  selectedItem,
  onSelectedItemChange,
  inputValue,
  onInputValueChange
}) => {
  const {
    isOpen,
    getMenuProps,
    getInputProps,
    getComboboxProps,
    highlightedIndex,
    getItemProps,
  } = useCombobox({
    items,
    // 传入父组件的选中项，让外部控制状态
    selectedItem,
    onSelectedItemChange,
    // 可选：受控输入框内容
    inputValue,
    onInputValueChange,
  });

  return (
    <div {...getComboboxProps()}>
      <input {...getInputProps()} />
      <ul {...getMenuProps()}>
        {isOpen
          ? items.map((item, index) => (
              <li
                {...getItemProps({ item, index })}
                style={{
                  backgroundColor: highlightedIndex === index ? 'lightgray' : 'white',
                  fontWeight: selectedItem === item ? 'bold' : 'normal',
                }}
              >
                {item.name}
              </li>
            ))
          : null}
      </ul>
    </div>
  );
};

export default Autocomplete;

步骤2：父组件处理选中后清空逻辑 #

在父组件中，当用户选中项时，先更新自身状态展示选中内容，然后立即将selectedItem设为null（同时清空输入框内容），这样Autocomplete组件就会响应这个变化，清空选中项和输入值：

import React, { useState, useEffect } from 'react';
import Autocomplete from './Autocomplete';

const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
];

export default function App() {
  const [currentSelected, setCurrentSelected] = useState(null);
  const [inputVal, setInputVal] = useState('');

  const handleSelectedItemChange = (item) => {
    // 先把选中项同步到父组件状态，用于展示
    setCurrentSelected(item);
  };

  // 监听选中项变化，一旦有值就延迟清空（避免状态更新冲突）
  useEffect(() => {
    if (currentSelected) {
      const timer = setTimeout(() => {
        setCurrentSelected(null);
        setInputVal(''); // 同时清空输入框
      }, 0);
      // 组件卸载时清除定时器
      return () => clearTimeout(timer);
    }
  }, [currentSelected]);

  return (
    <div className="App">
      <h1>{currentSelected ? currentSelected.name : 'No item selected'}</h1>
      <Autocomplete
        items={items}
        selectedItem={currentSelected}
        onSelectedItemChange={handleSelectedItemChange}
        inputValue={inputVal}
        onInputValueChange={setInputVal}
      />
    </div>
  );
}

为什么之前的实现不行？ #

之前的组件可能没有将父组件传入的selectedItem传递给Downshift，导致Downshift用内部维护的状态来管理选中项，外部props的变化无法影响内部状态。改成受控模式后，Downshift的选中状态完全由父组件的props控制，就能实现你要的“选中后父组件展示，Autocomplete清空”的效果了。

内容的提问来源于stack exchange，提问作者Matthew Scott