如何在使用 useState 时减少反应中的重复？

Question

I am using useState in react native. I created a state called lstandtime and lacttime.

I also created functions called onSubmitfunc and LsonChangefunc and LaconChangefunc.

We need 3 components called MainCons, so we made 3 components. But it could be three or more.

As you can see, the format of each component, state, and function are all similar, but three are needed, so a number is attached to the end of the variable.

I want to reduce duplicate code, but how do I do it?

this is my code

function Component() {
  const [lstandtime1, setLstandtime1] = useState("");
  const [lacttime1, setLacttime1] = useState("");

  const [lstandtime2, setLstandtime2] = useState("");
  const [lacttime2, setLacttime2] = useState("");

  const [lstandtime3, setLstandtime3] = useState("");
  const [lacttime3, setLacttime3] = useState("");

  const onSubmitfunc1 = useCallback(
    (e) => {
      e.preventDefault();
    },
    [lstandtime1, lacttime1],
  );

  const LsonChangefunc1 = useCallback((e) => {
    e.preventDefault();
    setLstandtime1(e.target.value);
  }, []);

  const LaconChangefunc1 = useCallback((e) => {
    e.preventDefault();
    setLacttime1(e.target.value);
  }, []);

  const onSubmitfunc2 = useCallback(
    (e) => {
      e.preventDefault();
    },
    [lstandtime2, lacttime2],
  );

  const LsonChangefunc2 = useCallback((e) => {
    e.preventDefault();
    setLstandtime2(e.target.value);
  }, []);

  const LaconChangefunc2 = useCallback((e) => {
    e.preventDefault();
    setLacttime2(e.target.value);
  }, []);

  const onSubmitfunc3 = useCallback(
    (e) => {
      e.preventDefault();
    },
    [lstandtime3, lacttime3],
  );

  const LsonChangefunc3 = useCallback((e) => {
    e.preventDefault();
    setLstandtime3(e.target.value);
  }, []);

  const LaconChangefunc3 = useCallback((e) => {
    e.preventDefault();
    setLacttime3(e.target.value);
  }, []);

  return (
    <>
      <MainCons onClick={onSubmitfunc1}>
        <input value={lstandtime1} onChange={LsonChangefunc1} />

        <input value={lacttime1} onChange={LaconChangefunc1} />
      </MainCons>

      <MainCons onClick={onSubmitfunc2}>
        <input value={lstandtime2} onChange={LsonChangefunc2} />

        <input value={lacttime2} onChange={LaconChangefunc2} />
      </MainCons>

      <MainCons onClick={onSubmitfunc3}>
        <input value={lstandtime3} onChange={LsonChangefunc3} />

        <input value={lacttime3} onChange={LaconChangefunc3} />
      </MainCons>
    </>
  );
}

Answer 1

Maybe declare an object with all these properties and then use them as parameters at your update functions.

See my example code below. This is just a snippet to give you the idea.

const [options, setOptions] = useState({ lstandtime1: '', lacttime1: '', lstandtime2: '', lacttime2: '', lstandtime3: '', lacttime3: '' })


const changeFunction = useCallback((e, property) => {
      e.preventDefault();
      setOptions({...options, [property]: e.target.value})
    }, []);
    
          <input
      value={options.lacttime1}
      onChange={e => changeFunction(e, 'lacttime1')}
      />

If you need more than these and you want to go further, you could create a loop

let obj = {}
for (let i = 1; i < 10; i++) {
  obj['lstandtime' + i] = '';
  obj['lacttime' + i] = '';
}

and then parametrize your MainCons component with these values using Object.entries

Edit Cannot test my code but I thought about AKX's comment and i wrote this solution. It's cleaner and I hope it helps you

function Component() {
  const size = 5;
  const [lstandtime, setLstandtime] = useState([...new Array(size).fill('')])
  const [lacttime, setLacttime] = useState([...new Array(size).fill('')])

  const onSubmitfunction = useCallback(deps => e => {
      e.preventDefault();
    },
     deps,
  );

  const LsonChangefunction = useCallback(index => e => {
    e.preventDefault();
    setLstandtime([...lstandtime, [index]: e.target.value]);
  }, []);

  const LaconChangefunction = useCallback(index => e => {
    e.preventDefault();
    setLacttime([...lacttime, [index]: e.target.value]);
  }, []);

  return (
    <>
    ({lstandtime.map((val, index) => {
        return (
          <MainCons onClick={e => onSubmitfunction([lstandtime[index], lacttime[index]])}>
            <input value={lstandtime[index]} onChange={LsonChangefunction(index)} />

            <input value={lacttime[index]} onChange={LaconChangefunction(index)} />
          </MainCons>
        )
    })
    })
    </>
  );
}

Answer 2

const SupComponet = () => {
    const [lstandtime1, setLstandtime1] = useState('');
    const [lacttime1, setLacttime1] = useState('');
    const onSubmitfunc1 = useCallback((e) => {
      e.preventDefault();


    }, [lstandtime1, lacttime1]);


    const LsonChangefunc1 = useCallback((e) => {
      e.preventDefault();
      setLstandtime1(e.target.value)
    }, []);


    const LaconChangefunc1 = useCallback((e) => {
      e.preventDefault();
      setLacttime1(e.target.value)
    }, []);
    return <MainCons onClick={onSubmitfunc1}>
      <input
      value={lstandtime1}
      onChange={LsonChangefunc1}
      />

      <input
      value={lacttime1}
      onChange={LaconChangefunc1}
      />
    </MainCons>
}

const MainComponent = () => {
    return <>{new Array(3).fill(0).map((_) => <SupComponent />)}</>
}

Answer 3

If you have multiple states of the same kind you could use an array as mentioned by @AKX in the comments:

function Component() {
  const [mainCons, setMainCons] = useState(new Array(3).fill({
    lstandtime: "", 
    lacttime: "",
  }));

  const onSubmitfunc = useCallback((idx) => (e) => {
      e.preventDefault();
    },
    [mainCons],
  );

  const LsonChangefunc = useCallback((idx) => (e) => {
    e.preventDefault();
    setMainCon((current) => ([
      ...current.slice(0, idx),
      {
        ...current[idx],
        lstandtime: e.target.value,
      }
      ...current.slice(idx+1),
    ]));
  }, []);

  const LaconChangefunc = useCallback((idx) => (e) => {
    e.preventDefault();
    setMainCon((current) => ([
      ...current.slice(0, idx),
      {
        ...current[idx],
        lacttime: e.target.value,
      }
      ...current.slice(idx+1),
    ]));
  }, []);

  return (
    <>
      {mainCons.map((mainCon, idx) => (
        <MainCons onClick={onSubmitfunc(idx)}>
          <input value={mainCon[idx].lstandtime} onChange={LsonChangefunc(idx)} />
          <input value={mainCon[idx].lacttime1} onChange={LaconChangefunc(idx)} />
        </MainCons>
      )}
    </>
  );
}