2

to tentando fazer com que um atributo de um dos objetos de um array de objetos alterne entre true e false segue codigo:

Estado inicial:

constructor(props) {
    super(props)

    this.state = {
        post: [{
            nome: '',
            conteudo: '',
            comment: false
        }]
    }
    this.handleClickComment = this.handleClickComment.bind(this)

}

Método que altera o atributo comment para cada objeto no array(corrigido):

handleClickComment(postagem) {
    postagem.comment = !postagem.comment
    let i = postagem.id -1
    this.setState({...this.state.post[this.state.post[i] = postagem]})
}

Esse método é chamando em um evento onClick, e recebe como parâmetro o objeto em questão conforme foi mapeado em outro componente, mas sempre que o evento o atributo comment simplesmente não muda. Alguém saberia me dizer o que há de errado?

Edit

Pessoal consegui resolver vou atualizar o código que funcionou perfeito, atualizou o valor do atributo sem alterar o estado da aplicação diretamente, sempre instancia um novo array com os novos parametros. Obrigado a todos pela ajuda.

5
  • linha problema: let comment = this.state.comment ? false : true, porque $this.state.post tem um array com as informações, concorda? ai ta o erro! não deveria ser let comment = this.state.post[indice].comment ? false : true??? a terceira linha também atribuição não parece correto.
    – novic
    17/07/2018 às 14:14
  • this.state.post.foreach(item => { item.comment = !item.comment; }) 17/07/2018 às 14:42
  • @LucasBrogni nesse caso o atributo comment seria alterado em todos os objetos do array, nao? 17/07/2018 às 19:19
  • @YagoSantos sim, nesse caso ele iria sempre alterar o valor, se está faço ele passaria para true e vice-versa. 17/07/2018 às 20:05
  • 1
    @LucasBrogni sim eu sei, mas no caso eu queria que fosse alterado somente o valor do indice em que ocorreu o evento onClick...mas ja entendi a logica vlw 17/07/2018 às 22:54

1 Resposta 1

1

Eu resolvi fazer um exemplo minimo para alteração em uma lista:

class ListApp extends React.Component {
  constructor(props) {
      super(props);
  }
  render() {
      return (
        <div key={this.props.indice}>{this.props.nome} <button type="button" onClick={this.props.click}>Comment - {this.props.comment ? "Verdadeiro": "Falso"}</button></div>
      )
  }
}
class App extends React.Component {
    constructor() {
      super();
      this.state = {
        post: [{
          nome: 'n1',
          conteudo: '',
          comment: false
        },
        {
          nome: 'n2',
          conteudo: '',
          comment: true
        }]
      }            
    }
    
    render() {
      return (<div>{     
          this.state.post.map((m,i) => <ListApp key={i} indice={i} comment={m.comment} nome={m.nome} click={this.handleClickComment.bind(this, i, m)} />)
      }</div>)
    }     
    
    handleClickComment(index, model) {
        model.comment = !model.comment;
        const { post } = this.state;
        post[index] = model;
        this.setState({post});        
    }
}

ReactDOM.render(<App/>,document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js" crossorigin></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="root"></div>

3
  • Obrigado @Virgilio Novic, mas só uma duvida...nesse caso ao definir this.state.post[index] = model, o estado da aplicação não estaria sendo alterado diretamente? 17/07/2018 às 19:20
  • @YagoSantos seria alterado o valor é no setState o estado geral.
    – novic
    17/07/2018 às 21:36
  • 1
    o que acontece é que o estado nao pode ser alterado diretamente, deve sempre ser gerado um novo array...mas ja entendi a logica, obrigado pelas dicas, vou implementar as mudanças 17/07/2018 às 22:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .