Function 仅被传递给 React 子组件一次

Question

I've got something I don't understand here. I'm creating a hierarchy of React functional components like so:

const ContainerComponent = () => {
  const [total, setTotal] = useState(initialValue);
  const updateFunction = () => { console.log('It got called'); }

  return (
    <EntryComponent updateFunction={updateFunction} />
  );
}

const EntryComponent = ({updateFunction}) => {
  const services = [{}, {}, {}];

  return (
    {services.map((service) => <ServiceComponent updateFunction={updateFunction} />}
  );
}

const ServiceComponent = ({updateFunction}) => {
  return (
    <input type='checkbox' onChange={updateFunction} ></input>
  );
}

So the idea is that the function gets passed all the way to the ServiceComponent and attached to the checkbox for each component. On change the function should fire, running the code and updating the total value in the ContainerComponent . Problem is that this isn't happening properly and the function seems only to be passed to the first ServiceComponent instance. If I drop a console.log(updateFunction) into ServiceComponent I see the function logged for the first component, and undefined for the remaining two. This is strange even for JavaScript. Can anyone shed any light as to what is going on? As far as I understand the function should be able to be passed like any other variable, and each ServiceComponent should have it to use when needed. Indeed, if I pass a second property to the child, an object or a primitive like an integer it comes through just fine on every child component. Why is this not occurring for my function, and how do I fix it?

Edit: I see the problem, and the problem is I'm not as smart as I think I am. In the condensed version I put here everything is being supplied to the child components in the same loop, but in the actual project the child components are created in multiple places and I neglected to pass the function property to all of them. Which is mind mindbogglingly stupid on my part. I'm leaving the question here as many of you have posted replies, for which I'm grateful.

Programming is hard, I think I need a better brain.

Answer 1

I tried refactoring your code to this

const ContainerComponent = () => {
  const [total, setTotal] = useState(0);
  const updateFunction = (e) => {
    console.log("update total stuff happens here");
    console.log(e);
  };

  return <EntryComponent updateFunction={updateFunction} />;
};

const EntryComponent = ({ updateFunction }) => {
  const services = ["one", "two", "three"];

  return (
    <>
      {services.map((service) => (
        <ServiceComponent updateFunction={updateFunction} />
      ))}
    </>
  );
};

const ServiceComponent = ({ updateFunction }) => (
  <input type="checkbox" onChange={updateFunction}></input>
);

and it works just fine. Try also using a react fragment in your entry component.

Answer 2

Edited after Author changed provided code

You've got completely valid code here. I suspect it's something to do with your passed function. Will check back as you provide more details.