创建工作时间组件 - 如何将多个值放入数组中的 useState答案

【问题标题】：Creating a work hours component - How to useState with multiple values going into an array创建工作时间组件 - 如何将多个值放入数组中的 useState
【发布时间】：2021-07-25 09:33:50
【问题描述】：

为了澄清我的问题 - 我正在构建一个组件，用于设置工人在一周内的工作时间。我不需要工作日，因为我只是将数组的索引用于工作日（0 - 星期日，1 - 星期一..等）。所以目前 workingDaysOfWeek 只是为了显示它们。将有 2 个文本字段输入开始时间和结束时间。我需要弄清楚如何将这些时间添加到数组中。最终将添加到一个大数组中，该数组将确定这些时间对应的工作日。所以简而言之。我需要一个包含 2 个值的数组。开始和结束时间。 0 索引应该是开始，1 索引应该是结束。这是我正在寻找的架构以及组件

当我更改文本字段时，下面的当前代码将继续给出未定义...我尝试使用 unshift 和 push 但这仅适用于其中一个，而不适用于另一个。我不使用如何将这些时间单独添加到数组中，或者如果使用 useState 是最好的主意。

{
  "working_hours": [
    ["09:00:00Z-07:00:00", "17:00:00Z-07:00:00"], // Monday
    ["09:00:00Z-07:00:00", "17:00:00Z-07:00:00"],
    ["09:00:00Z-07:00:00", "17:00:00Z-07:00:00"],
    ["09:00:00Z-07:00:00", "17:00:00Z-07:00:00"],
    ["09:00:00Z-07:00:00", "15:00:00Z-07:00:00"],
    null, // Saturday
    null // Sunday
  ]
}

工作日

const WorkingDays = () => {
  const workingDaysOfWeek = [
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday',
    'Sunday'
  ]
  const [workingDaysHours, setWorkingDaysHours] = useState([])

  function handleStartChange(e){
    console.log(e.target.value)
    setWorkingDaysHours(e.target.value)
    console.log(workingDaysHours)
  };

  function handleEndChange(e) {
    console.log(e.target.value)
    setWorkingDaysHours(e.target.value)
    console.log(workingDaysHours)
  }

  return (
    <form noValidate>
        {
          workingDaysOfWeek.map((days,index) => (
            <Grid container direction={'row'}>
            <Grid item xs={2}>
              <Typography >
                {days}
              </Typography>
            </Grid>
          <Grid item xs={2}>
          <TextField
          id={index}
          label="Start Time"
          type="time"
          onChange={handleStartChange}
          InputLabelProps={{
          shrink: true,
        }}
          inputProps={{
          step: 300, // 5 min
        }}
          />
          </Grid>
          <Grid item xs={4}>
          <TextField
          id="end_time"
          label="End Time"
          type="time"
          onChange={handleEndChange}
          InputLabelProps={{
          shrink: true,
        }}
          inputProps={{
          step: 300, // 5 min
        }}
          />
          </Grid>
            </Grid>
          ))
        }
    </form>
  )
}

export default WorkingDays

【问题讨论】：

标签： arrays reactjs react-hooks material-ui

【解决方案1】：

您似乎正在为整个数组设置一天的值。您正在使用单个值调用 setWorkingDaysHours，它会替换您的整个数组。如果你的更新函数是，它可能会更好

function handleStartChange(day, hours) {
    const newArray = [...workingDaysHours];
    newArray[day][0] = hours;
    setWorkingDaysHours(newArray);
}
function handleEndChange(day, hours) {
    const newArray = [...workingDaysHours];
    newArray[day][1] = hours;
    setWorkingDaysHours(newArray);
}

那么你的回调应该被称为

// Day being the variable taken from the map method
onChange={ev => handleStartChange(day, ev.target.value)}

【讨论】：