How you have multiple fetch loaders ?

[pullmann4rent]

Hello,

I have 3 selects and when you click I use fetcher.load to load my data.

the problem is idk how I filter it when this data comes then I want to set it in selectData2 else in selectData1.

const { useEffect } = require("react");

const [selectData1, setSelectData1] = useState([]);
const [selectData2, setSelectData2] = useState([]);
const [selectData3, setSelectData3] = useState([]);

const handleClickSelectOne = () => {
  fetcher.load('/myapi?cars=all');
};

useEffect(() => {
  setSelectData1(fetcher.data);
}, [fetcher]);

return (
  <>
    <select onClick={handleClickSelectOne}>
      {
        selectData1.length > 0 && selectData1.map((el) => (
          <option value={el.id} key={el.id}>{el.name}</option>
        ))
      }
    </select>

    <select>
      {
        selectData2.length > 0 && selectData2.map((el) => (
          <option value={el.id} key={el.id}>{el.name}</option>
        ))
      }
    </select>

    <select>
      {
        selectData3.length > 0 && selectData3.map((el) => (
          <option value={el.id} key={el.id}>{el.name}</option>
        ))
      }
    </select>
  </>
)

how can I now set the datas for selectData2 and 3 ? because when I use useEffect with fetcher I only have one data

[sergiodxa]

You can call useFetcher multiple times, each fetcher will have a unique state, similar to how useState works too.

[artemis-prime]

Are you sure? I'm trying to do that with something like

  const fetcher1 = useFetcher();
  const fetcher2 = useFetcher();
  const fetcher2Data = fetcher2.data 

but fetcher2Data always comes as the data from the FIRST fetcher. This implies the hooks shares state and is not intended to be used multiple times like this.

[kiliman]

That would definitely be odd. Are your fetchers hitting the same endpoint? Can you provide a repro?