ReactJS中react-select下拉列表如何拼接分页数据而非替换原有选项

问题根因 #

你当前每次调用getComunes获取下一页数据时，存储公共数据的Comunes变量会被新接口返回的20条数据直接覆盖，所以生成的选项永远只有当前页的内容。你只需要在数据存储环节把新老数据做拼接即可，有两种常用实现方案：

方案1：修改Redux侧的存储逻辑（推荐，数据全局可复用）

找到getComunes对应的reducer处理逻辑，把「替换旧数组」的逻辑改成「拼接新数组」：

// 原reducer逻辑大概是这样的：
case 'GET_COMUNES_SUCCESS':
  return {
    ...state,
    Comunes: action.payload // 这里直接替换了旧数据
  }

// 修改为拼接逻辑：
case 'GET_COMUNES_SUCCESS':
  return {
    ...state,
    Comunes: [...state.Comunes, ...action.payload] // 把新页数据拼到旧数组后面
  }

注意切换搜索关键词、重置下拉框等需要清空选项的场景，要加重置Comunes为[]的逻辑，避免旧数据残留。

方案2：在当前组件内部维护累加的选项列表

如果不想修改全局Redux逻辑，可以在组件内单独加一个state存储所有拼接好的选项：

// 新增state存储所有累加的选项
const [allOptions, setAllOptions] = useState([])
const [pageNumber, setPageNumber] = useState(0)

useEffect(() => {
  props.getComunes(pageNumber);
}, [pageNumber])

// 监听Comunes的变化，新数据返回时拼到allOptions里
useEffect(() => {
  if (Comunes?.length) {
    const newOptions = Comunes.map(comune => ({ 
      value: comune.comCod, 
      label: comune.comDes 
    }))
    setAllOptions(prev => [...prev, ...newOptions])
  }
}, [Comunes])


const addValue = () => {
  setPageNumber(pageNumber + 1)
}


const SelectMenuButton = (props) => {
  return (
    <components.MenuList  {...props}>
      {props.children}
      <button onClick={() => addValue()}>Add new element</button>
    </components.MenuList >
  )
}

return(
  //...
  <AvGroup>
    <Label id="comCodLabel" for="comCod">
      Select
    </Label>
    <AsyncSelect
      options={allOptions} // 替换成累加的allOptions
      placeholder='Start typing'
      components={{ MenuList: SelectMenuButton }} />
  </AvGroup>
)

const mapDispatchToProps = {
  getComunes
}

如果是带搜索的下拉，需要在搜索关键词变化时清空allOptions同时把pageNumber重置为0，重新加载第一页数据即可。

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