javascript - 使用 useState 时如何减少 React 中的重复？

Question

我在 native react 中使用 useState 。 我创建了一个名为“站立时间”和“哺乳时间”的状态。

我还创建了名为 onSubmitfunc、LsonChangefunc 和 LaconChangefunc 的函数。

我们需要 3 个名为 MainCons 的组件，因此我们制作了 3 个组件。但也可能是三个或更多。

如您所见，每个组件、状态和函数的格式都相似，但需要三个，因此在变量末尾附加一个数字。

我想减少重复代码，但我该怎么做？

这是我的代码

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

也许声明一个具有所有这些属性的对象，然后将它们用作更新函数的参数。

请参阅下面的示例代码。这只是一个给您提供想法的片段。

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')}
      />

如果您需要的不仅仅是这些并且想要更进一步，您可以创建一个循环

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

然后使用 Object.entries 使用这些值参数化您的 MainCons 组件

编辑 无法测试我的代码，但我考虑了 AKX 的评论，并编写了这个解决方案。它更干净，希望对您有帮助

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>
        )
    })
    })
    </>
  );
}