Настройка состояния вложенного объекта

Question

У меня проблема с настройкой состояния. После нажатия кнопки статус всех флажков должен быть установлен в соответствии с начальным состоянием. К сожалению, ничего не происходит. Что я делаю неправильно в методе setObject?

Источник кода: https://codesandbox.io/s/competent-saha-6iwjw?file= / src / App. js

Answer 1

Не используется toggle в OwnToggle:

const OwnToggle = props => {
  // not `value`
  const { toggle, path, toggleSwitchHandler } = props;

  return (
    <Toggle checked={toggle} onChange={e => toggleSwitchHandler(path, e)} />
  );
};

И вы не передаете состояние object:

// not obj
<FirstRow toggle={object} toggleSwitchHandler={toggleSwitchHandler} />
<SecondRow toggle={object} toggleSwitchHandler={toggleSwitchHandler} />

Кроме того, вы мутируете глобальный объект в toggleSwitchHandler, а затем вы передаете на него:

  const toggleSwitchHandler = (path, e) => {
    // is a SHALLOW COPY, you need a deep copy here
    const tempObject = { ...obj };
    // mutate global object
    set(tempObject, path, e.target.checked);
    // relay on global object
    setObject({ ...object, ...tempObject });
  };

Изменить trusting-visvesvaraya-rqo14

Answer 2

Вы не используете toggle, который отражает статус проверки. но вы использовали value, который никогда не устанавливается.

import React from "react";
import Toggle from "react-toggle";

const OwnToggle = props => {
  // here you have to use toggle, not value
  const { toggle, path, toggleSwitchHandler } = props;

  return (
    <Toggle checked={toggle} onChange={e => toggleSwitchHandler(path, e)} />
  );
};

export default OwnToggle;

А также вам нужно было передать object вместо obj в приложении. js.

<FirstRow toggle={object} toggleSwitchHandler={toggleSwitchHandler} />
<SecondRow toggle={object} toggleSwitchHandler={toggleSwitchHandler} />

В вашем toggleSwitchHandler должна быть модификация:

const toggleSwitchHandler = (path, e) => {
    const tempObject = { ...object };
    set(tempObject, path, !get(object, path)); // get from lodash
    setObject({ ...object, ...tempObject });
};

Answer 3

Вы передаете константу вместо родительского состояния

// obj is a const
<FirstRow toggle={obj} toggleSwitchHandler={toggleSwitchHandler} />
<SecondRow toggle={obj} toggleSwitchHandler={toggleSwitchHandler} />

Попробуйте передать изменяющееся состояние

<FirstRow toggle={object} toggleSwitchHandler={toggleSwitchHandler} />
<SecondRow toggle={object} toggleSwitchHandler={toggleSwitchHandler} />