Как в обработчиках React сослаться на общий атрибут c объекта в моем состоянии, которое я хочу изменить? - PullRequest
Новая
       28

Как в обработчиках React сослаться на общий атрибут c объекта в моем состоянии, которое я хочу изменить?

1 голос
/ 09 июля 2020

Я использую перехватчики React для своего приложения React 16.13.0. Я пытаюсь написать общую c функцию для обновления атрибута сложного объекта в моем состоянии. 

  const [coop, setCoop] = React.useState(props.coop);

Моя форма содержит элементы, подобные приведенным ниже 

<Input
        inputType={"text"}
        title={"Name"}
        name={"name"}
        value={coop.name}
        placeholder={"Enter cooperative name"}
        handleChange={handleInput}
        errors={errors}
      />
...
<Input
        inputType={"text"}
        title={"Street"}
        name={"coop.addresses[0].formatted"}
        value={coop.addresses[0].formatted}
        placeholder={"Enter address street"}
        handleChange={handleInput}
        errors={errors}
      />

I ' Я пытался написать следующие функции, но я не знаю, как сослаться на общий атрибут c моего состояния «coop» в моей функции. 

  const handleInput = (e) => {
    let self = this;
    let value = e.target.value;
    let name = e.target.name;
    if (name.indexOf("[") === -1) {
      console.log("updating " + name + " with value:" + value);
      setValue(coop, name, value);
    } else {
      const keys = name.split(/[\[\].]+/);
      setCoop(updateValue(coop, keys, value));
    }
  };

  const updateValue = (obj, name, value, index = 0) => {
    if (name.length - 1 > index) {
      const isArray = Array.isArray(obj[name[index]]);
      obj[name[index]] = this.updateValue(
        isArray ? [...obj[name[index]]] : { ...obj[name[index]] },
        name,
        value,
        index + 1
      );
    } else {
      obj = { ...obj, [name[index]]: value };
    }
    return obj;
  };
    ...

  const setValue = (obj, is, value) => {
    console.log("setting " + is + " of value: " + value);
    if (typeof is == "string") return setValue(obj, is.split("."), value);
    else if (is.length === 1 && value !== undefined) {
      return setCoop({ coop: obj[is[0]] = value });
    } else if (is.length === 0) return obj;
    else return setValue(obj[is[0]], is.slice(1), value);
  };

Проблемы с этой строкой 

setCoop({ coop: obj[is[0]] = value });

Как мне сослаться на общий c атрибут «coop» и его значение?

1 Ответ

0 голосов
/ 09 июля 2020

Этот вопрос не относится к хукам или React, его JavaScript.

В основном вы спрашиваете, как установить общий c ключ в объекте.

Вам следует использовать утилиту функция для этого в качестве нетривиального решения, см. lodash.set

Устанавливает значение на пути к объекту. Если часть пути не существует, она создается. Для отсутствующих свойств индекса создаются массивы, а для всех остальных отсутствующих свойств создаются объекты. Используйте _.setWith для настройки создания пути. 

const object = { 'a': [{ 'b': { 'c': 3 } }] };
 
_.set(object, 'a[0].b.c', 4);
console.log(object.a[0].b.c);
// => 4
 
_.set(object, ['x', '0', 'y', 'z'], 5);
console.log(object.x[0].y.z);
// => 5

Для вашего конкретного случая c, предположим, что obj[is[0]] - это путь, с помощью которого вы можете установить состояние.

Но убедитесь, что состояние не изменено, рассматривает его как неизменяемое , т.е. используйте _.set для копии состояния.

...