如何将index作为参数添加到useEffect钩子？

Question

Well, I am trying to figure out how to play with an array within useEffect hook. Basically, I want to know how to pass index as a parameter so I don't have to grab the indexes manually.

I am fetching some data from the backend in order to edit some form fields. The field I am having trouble, is a field that you could create dynamically. There could be only 1 or 100.

This is the component:

    // HERE IS WHERE I AM ATTEMPTING TO DO WHAT I NEED
    useEffect(() => {

    // So there is only one name key.
    // I need that to be dynamic. To accept as many name keys as possible.
    startupFourthStepFormActionHandler({
      products_or_services:
        [
          {
            name:
              startupProductsOrServicesInfo.productsorservices &&
              startupProductsOrServicesInfo.productsorservices[0].name,
          },
        ] || [],
    });
  }, []);


  return (
    <div>
      {productsOrServicesInputs.map((input, index) => (
        <div key={input}>
          // THESE ARE DYNAMIC INPUTS. SO THERE COULD 1 OR 100
          <FormField
            value={startupFourthStepForm.products_or_services[index].name}
          />
          // LET'S SAY THIS WAS CREATED DYNAMICALLY
          <FormField
            value={startupFourthStepForm.products_or_services[index].name}
          />
        </div>
      ))}
    </div>
  );
};

If you see the component above, on useEffect I am doing this:

  return startupFourthStepFormActionHandler({
      products_or_services:
        [
          {
            name:
              startupProductsOrServicesInfo.productsorservices &&
              startupProductsOrServicesInfo.productsorservices[0].name,
          },
        ] || [],
    });

I would like to turn that into something like:

  return startupFourthStepFormActionHandler({
      products_or_services:
        [
          {
            name:
              startupProductsOrServicesInfo.productsorservices &&
              startupProductsOrServicesInfo.productsorservices[INDEX].name,
          },
        ] || [],
    });

Or something which allows me to have as many name keys as needed. Like:

  return startupFourthStepFormActionHandler({
      products_or_services:
        [Here I should grab an array of 100 hundred objects with key called name] || [],
    });

So I can do something like: startupProductsOrServicesInfo.productsorservices[index].name

As you see I have this startupProductsOrServicesInfo.productsorservices[0].name but I need that be the proepr index of the item in the array. For now it is only grabbing the index 0, I need that index to be grabbed dynamically.

In the useEffect method on the component, you may see this startupProductsOrServicesInfo.productsorservices which is an API call and returns this ->

{
  "success": true,
  "productsorservices": [
    {
      "name": "Software",
    },
    {
      "name": "Hardware",
    }
  ]
}

So all I am trying to is to set the value coming from the backend here on this value ->

value={startupFourthStepForm.products_or_services[index].name} which you may in the component <FormField /> .

I need to do that in the useEffect hook.

What am I missing?

TL;DR

For no the component is doing what I need, but it only grabs the first index of the array, startupProductsOrServicesInfo.productsorservices[0].name and I need it to be grabbed dynamically.

Answer 1

Fundamentally useEffect hooks are just a way to control the timing of certain code. Otherwise they're not special at all, and so to solve your problem you just need regular old React solutions.

If you want to pass the index into your component, you simply do so with props :

const YourComponent = props => {

    // HERE IS WHERE I AM ATTEMPTING TO DO WHAT I NEED
    useEffect(() => {

    // ..
      startupProductsOrServicesInfo.productsorservices[props.index].name,
    // ..
}

And then in pass the index in in your parent component:

return <YourComponent index={1} />

If you want your component to remember the index, you have to use state instead:

const YourComponent = () => {
    const [index, setIndex] = useState(0);
    // HERE IS WHERE I AM ATTEMPTING TO DO WHAT I NEED
    useEffect(() => {

    // ..

          startupProductsOrServicesInfo.productsorservices[index].name,

If you want an event to change that index, for instance if you wanted a button in your component to increment it, you would use the setIndex function returned by useState :

const YourComponent = () => {
    const [index, setIndex] = useState(0);
    // HERE IS WHERE I AM ATTEMPTING TO DO WHAT I NEED
    useEffect(() => {

    // ..

          startupProductsOrServicesInfo.productsorservices[index].name,

    });
    const incrementIndex = () => setIndex(index + 1);
    return <button onClick={incrementIndex}>Click Me!</button>;