Estou tentando organizar meu estado usando propriedades aninhadas como esta:

this.state = {
   someProperty: {
      flag:true
   }
}

Mas atualizando o estado assim,

this.setState({ someProperty.flag: false });

não funciona Como isso pode ser feito corretamente?

Para setStateum objeto aninhado, você pode seguir a abordagem abaixo, pois acho que setState não lida com atualizações aninhadas.

var someProperty = {...this.state.someProperty}
someProperty.flag = true;
this.setState({someProperty})

A idéia é criar um objeto fictício, executar operações nele e, em seguida, substituir o estado do componente pelo objeto atualizado

Agora, o operador de propagação cria apenas uma cópia aninhada em nível do objeto. Se o seu estado estiver altamente aninhado, como:

this.state = {
   someProperty: {
      someOtherProperty: {
          anotherProperty: {
             flag: true
          }
          ..
      }
      ...
   }
   ...
}

Você pode definirState usando o operador spread em cada nível, como

this.setState(prevState => ({
    ...prevState,
    someProperty: {
        ...prevState.someProperty,
        someOtherProperty: {
            ...prevState.someProperty.someOtherProperty, 
            anotherProperty: {
               ...prevState.someProperty.someOtherProperty.anotherProperty,
               flag: false
            }
        }
    }
}))

No entanto, a sintaxe acima fica feia à medida que o estado se torna cada vez mais aninhado e, portanto, recomendo que você use o immutability-helperpacote para atualizar o estado.

Veja esta resposta sobre como atualizar o estado com immutability helper.

Para escrever em uma linha

this.setState({ someProperty: { ...this.state.someProperty, flag: false} });

Às vezes, as respostas diretas não são as melhores :)

Versão curta:

esse código

this.state = {
    someProperty: {
        flag: true
    }
}

deve ser simplificado como algo como

this.state = {
    somePropertyFlag: true
}

Versão longa:

Atualmente, você não deve querer trabalhar com o estado aninhado no React . Como o React não está orientado para trabalhar com estados aninhados e todas as soluções propostas aqui parecem hacks. Eles não usam a estrutura, mas lutam com ela. Eles sugerem escrever um código não tão claro para fins duvidosos de agrupar algumas propriedades. Portanto, são muito interessantes como resposta ao desafio, mas praticamente inúteis.

Vamos imaginar o seguinte estado:

{
    parent: {
        child1: 'value 1',
        child2: 'value 2',
        ...
        child100: 'value 100'
    }
}

O que acontecerá se você alterar apenas um valor de child1? O React não renderiza novamente a exibição porque usa comparação superficial e descobre que a parentpropriedade não foi alterada. Aliás, a mutação direta do objeto de estado é considerada uma prática ruim em geral.

Então você precisa recriar todo o parentobjeto. Mas neste caso, encontraremos outro problema. O React pensará que todas as crianças mudaram seus valores e representará novamente todos eles. Claro que não é bom para o desempenho.

Ainda é possível resolver esse problema escrevendo alguma lógica complicada, shouldComponentUpdate()mas eu preferiria parar por aqui e usar a solução simples da versão curta.

aviso Legal

Estado aninhado em React é design incorreto

Leia esta excelente resposta .

Raciocínio por trás desta resposta:

O setState do React é apenas uma conveniência interna, mas você logo percebe que ele tem seus limites. O uso de propriedades personalizadas e o uso inteligente do forceUpdate oferecem muito mais. por exemplo:

class MyClass extends React.Component {
    myState = someObject
    inputValue = 42
...

O MobX, por exemplo, descarta o estado completamente e usa propriedades observáveis ​​personalizadas.
Use Observables em vez de state nos componentes React.

a resposta para sua miséria - veja o exemplo aqui

Há outra maneira mais curta de atualizar qualquer propriedade aninhada.

this.setState(state => {
  state.nested.flag = false
  state.another.deep.prop = true
  return state
})

Em uma linha

 this.setState(state => (state.nested.flag = false, state))

_{Nota: Este aqui é o operador Vírgula ~ MDN ; veja em ação aqui (Sandbox) .}

É semelhante a (embora isso não mude a referência de estado)

this.state.nested.flag = false
this.forceUpdate()

_{Para a diferença sutil neste contexto entre forceUpdatee setStateveja o exemplo vinculado.}

É claro que isso está abusando de alguns princípios básicos, como o statedeve ser somente leitura, mas, como você está descartando imediatamente o estado antigo e o substituindo por um novo estado, está tudo bem.

Atenção

Mesmo que o componente que contém o estado seja atualizado e renderizado corretamente ( exceto essa opção ) , os objetos não serão propagados para os filhos (veja o comentário do Spymaster abaixo) . Use essa técnica apenas se você souber o que está fazendo.

Por exemplo, você pode aprovar uma proposta simples alterada que é atualizada e aprovada com facilidade.

render(
  //some complex render with your nested state
  <ChildComponent complexNestedProp={this.state.nested} pleaseRerender={Math.random()}/>
)

Agora, mesmo que a referência para complexNestedProp não tenha sido alterada ( shouldComponentUpdate )

this.props.complexNestedProp === nextProps.complexNestedProp

o componente será renderizado novamente sempre que o componente pai for atualizado, que é o caso após a chamada this.setStateou this.forceUpdateno pai.

Efeitos da mutação do estado

O uso de estado aninhado e a mutação direta do estado são perigosos porque objetos diferentes podem conter (intencionalmente ou não) referências diferentes (mais antigas) ao estado e podem não necessariamente saber quando atualizar (por exemplo, ao usar PureComponentou se shouldComponentUpdateé implementado para retornar false) OU são destinado a exibir dados antigos, como no exemplo abaixo.

Imagine uma linha do tempo que supostamente renderiza dados históricos. A mutação dos dados nas mãos resultará em um comportamento inesperado, pois também mudará os itens anteriores.

De qualquer forma, aqui você pode ver que Nested PureChildClassele não foi renderizado novamente porque os objetos não foram propagados.

Se você estiver usando o ES2015, terá acesso ao Object.assign. Você pode usá-lo da seguinte maneira para atualizar um objeto aninhado.

this.setState({
  someProperty: Object.assign({}, this.state.someProperty, {flag: false})
});

Você mescla as propriedades atualizadas com as existentes e usa o objeto retornado para atualizar o estado.

Editar: Adicionado um objeto vazio como destino à função de atribuição para garantir que o estado não seja alterado diretamente, como apontado pelo carkod.

const newState = Object.assign({}, this.state);
newState.property.nestedProperty = "new value";
this.setState(newState);

Existem muitas bibliotecas para ajudar com isso. Por exemplo, usando o immutability-helper :

import update from 'immutability-helper';

const newState = update(this.state, {
  someProperty: {flag: {$set: false}},
};
this.setState(newState);

Usando lodash / fp set:

import {set} from 'lodash/fp';

const newState = set(["someProperty", "flag"], false, this.state);

Usando lodash / fp merge:

import {merge} from 'lodash/fp';

const newState = merge(this.state, {
  someProperty: {flag: false},
});

Usamos o Immer https://github.com/mweststrate/immer para lidar com esses tipos de problemas.

Acabei de substituir esse código em um de nossos componentes

this.setState(prevState => ({
   ...prevState,
        preferences: {
            ...prevState.preferences,
            [key]: newValue
        }
}));

Com isso

import produce from 'immer';

this.setState(produce(draft => {
    draft.preferences[key] = newValue;
}));

Com o immer, você lida com o seu estado como um "objeto normal". A mágica acontece nos bastidores com objetos proxy.

Aqui está uma variação da primeira resposta dada neste tópico, que não requer pacotes extras, bibliotecas ou funções especiais.

state = {
  someProperty: {
    flag: 'string'
  }
}

handleChange = (value) => {
  const newState = {...this.state.someProperty, flag: value}
  this.setState({ someProperty: newState })
}

Para definir o estado de um campo aninhado específico, você definiu o objeto inteiro. Fiz isso criando uma variável newStatee espalhando o conteúdo do estado atual primeiro usando o operador de dispersão ES2015 . Em seguida, substituí o valor de this.state.flagcom o novo valor (desde que eu defini flag: value depois que eu espalhei o estado atual no objeto, o flagcampo no estado atual é substituído). Então, simplesmente defino o estado de somePropertypara o meu newStateobjeto.

Embora o aninhamento não seja realmente como você deve tratar um estado de componente, às vezes é algo fácil para o aninhamento de camada única.

Para um estado como este

state = {
 contact: {
  phone: '888-888-8888',
  email: '[email protected]'
 }
 address: {
  street:''
 },
 occupation: {
 }
}

Um método reutilizável usado seria assim.

handleChange = (obj) => e => {
  let x = this.state[obj];
  x[e.target.name] = e.target.value;
  this.setState({ [obj]: x });
};

basta passar o nome do objeto para cada aninhamento que você deseja endereçar ...

<TextField
 name="street"
 onChange={handleChange('address')}
 />

Eu usei essa solução.

Se você tiver um estado aninhado como este:

   this.state = {
          formInputs:{
            friendName:{
              value:'',
              isValid:false,
              errorMsg:''
            },
            friendEmail:{
              value:'',
              isValid:false,
              errorMsg:''
            }
}

você pode declarar a função handleChange que copia o status atual e o atribui novamente com valores alterados

handleChange(el) {
    let inputName = el.target.name;
    let inputValue = el.target.value;

    let statusCopy = Object.assign({}, this.state);
    statusCopy.formInputs[inputName].value = inputValue;

    this.setState(statusCopy);
  }

aqui o html com o ouvinte de evento

<input type="text" onChange={this.handleChange} " name="friendName" />

Crie uma cópia do estado:

let someProperty = JSON.parse(JSON.stringify(this.state.someProperty))

faça alterações neste objeto:

someProperty.flag = "false"

agora atualize o estado

this.setState({someProperty})

Embora você tenha perguntado sobre um estado do componente React baseado em classe, o mesmo problema existe com o gancho useState. Pior ainda: o gancho useState não aceita atualizações parciais. Portanto, essa pergunta se tornou muito relevante quando o gancho useState foi introduzido.

Decidi postar a seguinte resposta para garantir que a pergunta cubra cenários mais modernos nos quais o gancho useState é usado:

Se você tem:

const [state, setState] = useState({ someProperty: { flag: true, otherNestedProp: 1 }, otherProp: 2 })

você pode definir a propriedade aninhada clonando a corrente e corrigindo os segmentos necessários dos dados, por exemplo:

setState(current => { ...current, someProperty: { ...current.someProperty, flag: false } });

Ou você pode usar a biblioteca Immer para simplificar a clonagem e aplicação de patches do objeto.

Ou você pode usar a biblioteca Hookstate (exoneração de responsabilidade: eu sou um autor) para simplesmente gerenciar completamente os dados estatais complexos (locais e globais) e melhorar o desempenho (leia-se: para não se preocupar com a otimização da renderização):

import { useStateLink } from '@hookstate/core' 
const state = useStateLink({ someProperty: { flag: true, otherNestedProp: 1 }, otherProp: 2 })

obtenha o campo para renderizar:

state.nested.someProperty.nested.flag.get()
// or 
state.get().someProperty.flag

defina o campo aninhado:

state.nested.someProperty.nested.flag.set(false)

Aqui está o exemplo de Hookstate, onde o estado é aninhado profundamente / recursivamente na estrutura de dados do tipo árvore .

Duas outras opções ainda não mencionadas:

1. Se você tiver um estado profundamente aninhado, considere se é possível reestruturar os objetos filhos para ficarem na raiz. Isso facilita a atualização dos dados.
2. Existem muitas bibliotecas úteis disponíveis para lidar com o estado imutável listado nos documentos do Redux . Eu recomendo o Immer, pois ele permite que você escreva código de maneira mutante, mas lida com a clonagem necessária nos bastidores. Ele também congela o objeto resultante para que você não possa modificá-lo acidentalmente mais tarde.

Para tornar as coisas genéricas, trabalhei nas respostas de @ ShubhamKhatri e @ Qwerty.

objeto de estado

this.state = {
  name: '',
  grandParent: {
    parent1: {
      child: ''
    },
    parent2: {
      child: ''
    }
  }
};

controles de entrada

<input
  value={this.state.name}
  onChange={this.updateState}
  type="text"
  name="name"
/>
<input
  value={this.state.grandParent.parent1.child}
  onChange={this.updateState}
  type="text"
  name="grandParent.parent1.child"
/>
<input
  value={this.state.grandParent.parent2.child}
  onChange={this.updateState}
  type="text"
  name="grandParent.parent2.child"
/>

método updateState

setState como resposta de @ ShubhamKhatri

updateState(event) {
  const path = event.target.name.split('.');
  const depth = path.length;
  const oldstate = this.state;
  const newstate = { ...oldstate };
  let newStateLevel = newstate;
  let oldStateLevel = oldstate;

  for (let i = 0; i < depth; i += 1) {
    if (i === depth - 1) {
      newStateLevel[path[i]] = event.target.value;
    } else {
      newStateLevel[path[i]] = { ...oldStateLevel[path[i]] };
      oldStateLevel = oldStateLevel[path[i]];
      newStateLevel = newStateLevel[path[i]];
    }
  }
  this.setState(newstate);
}

setState como a resposta de @ Qwerty

updateState(event) {
  const path = event.target.name.split('.');
  const depth = path.length;
  const state = { ...this.state };
  let ref = state;
  for (let i = 0; i < depth; i += 1) {
    if (i === depth - 1) {
      ref[path[i]] = event.target.value;
    } else {
      ref = ref[path[i]];
    }
  }
  this.setState(state);
}

Nota: Esses métodos acima não funcionam para matrizes

Levo muito a sério as preocupações já expressas em torno da criação de uma cópia completa do seu estado componente. Com isso dito, eu sugeriria fortemente Immer .

import produce from 'immer';

<Input
  value={this.state.form.username}
  onChange={e => produce(this.state, s => { s.form.username = e.target.value }) } />

Isso deve funcionar React.PureComponent(por exemplo, comparações de estado superficial com o React), pois Immerhabilmente usa um objeto proxy para copiar eficientemente uma árvore de estado arbitrariamente profunda. O Immer também é mais tipicamente seguro em comparação com bibliotecas como o Immutability Helper e é ideal para usuários de Javascript e Typescript.

Função de utilitário de texto datilografado

function setStateDeep<S>(comp: React.Component<any, S, any>, fn: (s: 
Draft<Readonly<S>>) => any) {
  comp.setState(produce(comp.state, s => { fn(s); }))
}

onChange={e => setStateDeep(this, s => s.form.username = e.target.value)}

stateUpdate = () => {
    let obj = this.state;
    if(this.props.v12_data.values.email) {
      obj.obj_v12.Customer.EmailAddress = this.props.v12_data.values.email
    }
    this.setState(obj)
}

Descobri que isso funcionava para mim, tendo um formulário de projeto no meu caso em que, por exemplo, você tem um ID e um nome, e prefiro manter o estado de um projeto aninhado.

return (
  <div>
      <h2>Project Details</h2>
      <form>
        <Input label="ID" group type="number" value={this.state.project.id} onChange={(event) => this.setState({ project: {...this.state.project, id: event.target.value}})} />
        <Input label="Name" group type="text" value={this.state.project.name} onChange={(event) => this.setState({ project: {...this.state.project, name: event.target.value}})} />
      </form> 
  </div>
)

Avise-se me!

Algo assim pode ser suficiente,

const isObject = (thing) => {
    if(thing && 
        typeof thing === 'object' &&
        typeof thing !== null
        && !(Array.isArray(thing))
    ){
        return true;
    }
    return false;
}

/*
  Call with an array containing the path to the property you want to access
  And the current component/redux state.

  For example if we want to update `hello` within the following obj
  const obj = {
     somePrimitive:false,
     someNestedObj:{
        hello:1
     }
  }

  we would do :
  //clone the object
  const cloned = clone(['someNestedObj','hello'],obj)
  //Set the new value
  cloned.someNestedObj.hello = 5;

*/
const clone = (arr, state) => {
    let clonedObj = {...state}
    const originalObj = clonedObj;
    arr.forEach(property => {
        if(!(property in clonedObj)){
            throw new Error('State missing property')
        }

        if(isObject(clonedObj[property])){
            clonedObj[property] = {...originalObj[property]};
            clonedObj = clonedObj[property];
        }
    })
    return originalObj;
}

const nestedObj = {
    someProperty:true,
    someNestedObj:{
        someOtherProperty:true
    }
}

const clonedObj = clone(['someProperty'], nestedObj);
console.log(clonedObj === nestedObj) //returns false
console.log(clonedObj.someProperty === nestedObj.someProperty) //returns true
console.log(clonedObj.someNestedObj === nestedObj.someNestedObj) //returns true

console.log()
const clonedObj2 = clone(['someProperty','someNestedObj','someOtherProperty'], nestedObj);
console.log(clonedObj2 === nestedObj) // returns false
console.log(clonedObj2.someNestedObj === nestedObj.someNestedObj) //returns false
//returns true (doesn't attempt to clone because its primitive type)
console.log(clonedObj2.someNestedObj.someOtherProperty === nestedObj.someNestedObj.someOtherProperty) 

Eu sei que é uma pergunta antiga, mas ainda queria compartilhar como consegui isso. Assumindo que o estado no construtor se parece com isso:

  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      user: {
        email: ""
      },
      organization: {
        name: ""
      }
    };

    this.handleChange = this.handleChange.bind(this);
  }

Minha handleChangefunção é assim:

  handleChange(e) {
    const names = e.target.name.split(".");
    const value = e.target.type === "checkbox" ? e.target.checked : e.target.value;
    this.setState((state) => {
      state[names[0]][names[1]] = value;
      return {[names[0]]: state[names[0]]};
    });
  }

E certifique-se de nomear as entradas de acordo:

<input
   type="text"
   name="user.email"
   onChange={this.handleChange}
   value={this.state.user.firstName}
   placeholder="Email Address"
/>

<input
   type="text"
   name="organization.name"
   onChange={this.handleChange}
   value={this.state.organization.name}
   placeholder="Organization Name"
/>

Faço atualizações aninhadas com uma pesquisa reduzida :

Exemplo:

As variáveis ​​aninhadas no estado:

state = {
    coords: {
        x: 0,
        y: 0,
        z: 0
    }
}

A função:

handleChange = nestedAttr => event => {
  const { target: { value } } = event;
  const attrs = nestedAttr.split('.');

  let stateVar = this.state[attrs[0]];
  if(attrs.length>1)
    attrs.reduce((a,b,index,arr)=>{
      if(index==arr.length-1)
        a[b] = value;
      else if(a[b]!=null)
        return a[b]
      else
        return a;
    },stateVar);
  else
    stateVar = value;

  this.setState({[attrs[0]]: stateVar})
}

Usar:

<input
value={this.state.coords.x}
onChange={this.handleTextChange('coords.x')}
/>

Este é o meu estado inicial

    const initialStateInput = {
        cabeceraFamilia: {
            familia: '',
            direccion: '',
            telefonos: '',
            email: ''
        },
        motivoConsulta: '',
        fechaHora: '',
        corresponsables: [],
    }

O gancho ou você pode substituí-lo pelo estado (componente de classe)

const [infoAgendamiento, setInfoAgendamiento] = useState(initialStateInput);

O método para handleChange

const actualizarState = e => {
    const nameObjects = e.target.name.split('.');
    const newState = setStateNested(infoAgendamiento, nameObjects, e.target.value);
    setInfoAgendamiento({...newState});
};

Método para definir estado com estados aninhados

const setStateNested = (state, nameObjects, value) => {
    let i = 0;
    let operativeState = state;
    if(nameObjects.length > 1){
        for (i = 0; i < nameObjects.length - 1; i++) {
            operativeState = operativeState[nameObjects[i]];
        }
    }
    operativeState[nameObjects[i]] = value;
    return state;
}

Finalmente, esta é a entrada que eu uso

<input type="text" className="form-control" name="cabeceraFamilia.direccion" placeholder="Dirección" defaultValue={infoAgendamiento.cabeceraFamilia.direccion} onChange={actualizarState} />

Se você estiver usando o formik em seu projeto, ele tem uma maneira fácil de lidar com essas coisas. Aqui está a maneira mais fácil de fazer com o formik.

Primeiro defina seus valores iniciais dentro do atributo formik initivalues ​​ou no react. Estado

Aqui, os valores iniciais são definidos no estado de reação

   state = { 
     data: {
        fy: {
            active: "N"
        }
     }
   }

define acima valores iniciais para o campo formik dentro do initiValuesatributo formik

<Formik
 initialValues={this.state.data}
 onSubmit={(values, actions)=> {...your actions goes here}}
>
{({ isSubmitting }) => (
  <Form>
    <Field type="checkbox" name="fy.active" onChange={(e) => {
      const value = e.target.checked;
      if(value) setFieldValue('fy.active', 'Y')
      else setFieldValue('fy.active', 'N')
    }}/>
  </Form>
)}
</Formik>

Faça um console para verificar o estado atualizado em stringvez da função booleanformik setFieldValuepara definir o estado ou vá com a ferramenta debugger react para ver as alterações nos valores do estado do formik.

tente este código:

this.setState({ someProperty: {flag: false} });

eu vi o seguinte em um livro:

this.setState(state => state.someProperty.falg = false);

mas não tenho certeza se está certo ..