如何在React ES6中优雅地修改表单组件状态内的嵌套数据？

Question

I want to be able to modify some nested data (an object within an object) within my form component's state in React ES6. I currently have a working solution but I feel like it could be accomplished more elegantly.

The shape of the state that I want to modify is:

    this.state = {
        form: {
            address: {},
        },
    };

I want to be able to add/edit data within address: {} . The current working solution I have is:

    onChange(event) {
        const { form } = this.state;
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        name === 'street' || name === 'city'
            ? this.setState({
                  form: {
                      ...form,
                      address: {
                          ...form.address,
                          [name]: value,
                      },
                  },
              })
            : this.setState({
                  form: {
                      ...form,
                      [name]: value,
                  },
              });
    }

How can I make this solution more elegant? Is the conditional necessary? How can I make this more dynamic if I were to want to edit other nested objects within this same form component's state?

If what I currently have is on the right track, how can I make the this.setState() that modifies address: {} more dynamic? How can I make this accept any name for the nested object whether it is "address" or anything else?

---

UPDATE

As of a few minutes ago I came up with a leaner, working solution that I am actually liking better than the one I have above. Here is the refactored solution:

    onChange(event) {
        const { form } = this.state;
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;
        const object = 'address';

        name === 'street' || name === 'city'
            ? (form[object][name] = value)
            : (form[name] = value);
        this.setState({
            form,
        });
    }

So with this new code, how can I make this more dynamic? More specifically, how can I change the value of const object = 'address'; more dynamically depending on the input that is being changed?

Answer 1

Take a look at immutability-helper library. It can turn your code into:

  onChange(event) {
    const { type, checked, value, name } = event.target;

    const updatedValue = type === 'checkbox' ? checked : value;

    this.setState(state => {
      if (name === 'street' || name === 'city') {
        return {
          form: update(state.form, {
            address: {
              [name]: { $set: updatedValue },
            },
          })
        };
      }

      return {
        form: update(state.form, {
          [name]: { $set: updatedValue },
        }),
      }
    });
  }

Or you could do even something like this:

onChange(event) {
    const { type, checked, value, name } = event.target;

    const updatedValue = type === 'checkbox' ? checked : value;
    const updatedObject = { [name]: { $set: updatedValue } };

    this.setState(state => ({
      form: update(state.form, (name === 'street' || name === 'city') ? { address: updatedObject } : updatedObject)
    }));
  }

Answer 2

There are a couple of ways that you can achieve something "more elegant", but not on the same function. The first thing would be to extract state updater functions. On your example I would do something like this:

const updateForm = (key, value) => ({form}) => ({ ...form, [key]: value });

const updateAddress = (key, value) => updateForm("address", {...form.address, [key]: value});

onChange(event) {
   const { form } = this.state;
   const target = event.target;
   const value = target.type === 'checkbox' ? target.checked : target.value;
   const name = target.name;

   if (name === 'street' || name === 'city') {
     this.setState(updateAddress(name, value));
   } else {
     this.setState(updateForm(name, value));
   }
}

Note that I'm using the version of setState that takes a function of the form (prevState, props) => { partialState } and using destructuring to take form from the prevState passed from setState