Блог

У меня есть этот флажок, где пользователь может проверить все флажки. Я не могу сохранить это в firestore, так как каждый раз, когда я отправляю его, появляется ошибка и говорится:

  TypeError: s.indexOf is not a function
 

и если я проверю все флажки, и я console.log(state); это покажу, это:

 item1: true
item2: true
item3: true
 

то, что я хотел, было просто, когда был нажат конкретный флажок (пункт 1 и пункт 2), он просто выведет что-то вроде этого:

 item1 
item2
 

Ниже приведены все коды:

 const component = (props) => {
  const [state, setState] = useState({
    Fever: false,
    Headache: false,
    Nausea: false,
    "Muscle Pain": false,
  });
  const handleCheckbox = (event) => {
    console.log(event.target.value);
    setState({ ...state, [event.target.name]: event.target.checked });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    for (const p in state) {
      if (!state[p]) delete state[p];
    }
    try {
      const userRef = firestore.collection("users").doc(uid);
      const ref = userRef.set({
        state,
      });
      console.log(" saved");
    } catch (err) {
      console.log(err);
    }

  };

  return (
    <Container>
      <form onSubmit={handleSubmit}>
          <FormGroup style={{ alignContent: "center", padding: "1rem" }}>
            <FormControlLabel
              control={
                <Checkbox
                  checked={state.Fever}
                  name="Item1"
                  color="primary"
                  value="Item1"
                  onChange={handleCheckbox}
                />
              }
              label="Item1"
            />
            <FormControlLabel
              control={
                <Checkbox
                  checked={state.Headache}
                  name="Item2"
                  color="primary"
                  value="Item2"
                  onChange={handleCheckbox}
                />
              }
              label="Item2"
            />
            <FormControlLabel
              control={
                <Checkbox
                  checked={state.Nausea}
                  name="Item3"
                  color="primary"
                  value="Item3"
                  onChange={handleCheckbox}
                />
              }
              label="Item3"
            />
         
          </FormGroup>
          <Button type="submit">Submit</Button>
        <br />
      </form>
    </Container>
  );
};

export default component;
 

Как я могу получить значения item1, item2 и item3, чтобы сохранить их в том виде, в каком они есть в firestore? Спасибо.

Можете ли вы попробовать это

 const handleSubmit = (e) => {
    e.preventDefault();
    const newState = {...state};
    for (const p in newState) {
      if (!newState[p]) delete newState[p];
    }
    try {
      const userRef = firestore.collection("users").doc(uid);
      const ref = userRef.set({
        newState,
      });
      console.log(" saved");
    } catch (err) {
      console.log(err);
    }

  };