Modificação correta de matrizes de estado no ReactJS

Eu quero adicionar um elemento ao final de uma statematriz, esta é a maneira correta de fazer isso?

this.state.arrayvar.push(newelement);
this.setState({arrayvar:this.state.arrayvar});

Estou preocupado que modificar a matriz no local pushpossa causar problemas - é seguro?

A alternativa de fazer uma cópia da matriz e setStateisso parece um desperdício.

Os documentos do React dizem:

Trate esse estado como se fosse imutável.

Você pushmodificará o estado diretamente e isso poderá levar a um código propenso a erros, mesmo se você estiver "redefinindo" o estado novamente depois. Por exemplo, isso pode levar a que alguns métodos do ciclo de vida componentDidUpdatenão sejam acionados.

A abordagem recomendada nas versões posteriores do React é usar uma função atualizadora ao modificar estados para evitar condições de corrida:

this.setState(prevState => ({
  arrayvar: [...prevState.arrayvar, newelement]
}))

O "desperdício" de memória não é um problema comparado aos erros que você pode enfrentar ao usar modificações de estado não padrão.

Sintaxe alternativa para versões anteriores do React

Você pode usar concatpara obter uma sintaxe limpa, pois retorna uma nova matriz:

this.setState({ 
  arrayvar: this.state.arrayvar.concat([newelement])
})

No ES6, você pode usar o Operador de propagação :

this.setState({
  arrayvar: [...this.state.arrayvar, newelement]
})

Mais fácil, se você estiver usando ES6.

initialArray = [1, 2, 3];

newArray = [ ...initialArray, 4 ]; // --> [1,2,3,4]

Nova matriz será [1,2,3,4]

para atualizar seu estado no React

this.setState({
         arrayvar:[...this.state.arrayvar, newelement]
       });

Saiba mais sobre a destruição de matriz

A maneira mais simples com ES6:

this.setState(prevState => ({
    array: [...prevState.array, newElement]
}))

O React pode atualizar atualizações em lote e, portanto, a abordagem correta é fornecer ao setState uma função que execute a atualização.

Para o complemento React update, o seguinte funcionará de maneira confiável:

this.setState( state => update(state, {array: {$push: [4]}}) );

ou para concat ():

this.setState( state => ({
    array: state.array.concat([4])
}));

O seguinte mostra o que https://jsbin.com/mofekakuqi/7/edit?js,output como exemplo do que acontece se você errar.

A chamada setTimeout () adiciona corretamente três itens porque o React não atualizará em lotes as atualizações em um retorno de chamada setTimeout (consulte https://groups.google.com/d/msg/reactjs/G6pljvpTGX0/0ihYw2zK9dEJ ).

O buggy onClick adicionará apenas "Terceiro", mas o fixo adicionará F, S e T conforme o esperado.

class List extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      array: []
    }

    setTimeout(this.addSome, 500);
  }

  addSome = () => {
      this.setState(
        update(this.state, {array: {$push: ["First"]}}));
      this.setState(
        update(this.state, {array: {$push: ["Second"]}}));
      this.setState(
        update(this.state, {array: {$push: ["Third"]}}));
    };

  addSomeFixed = () => {
      this.setState( state => 
        update(state, {array: {$push: ["F"]}}));
      this.setState( state => 
        update(state, {array: {$push: ["S"]}}));
      this.setState( state => 
        update(state, {array: {$push: ["T"]}}));
    };



  render() {

    const list = this.state.array.map((item, i) => {
      return <li key={i}>{item}</li>
    });
       console.log(this.state);

    return (
      <div className='list'>
        <button onClick={this.addSome}>add three</button>
        <button onClick={this.addSomeFixed}>add three (fixed)</button>
        <ul>
        {list}
        </ul>
      </div>
    );
  }
};


ReactDOM.render(<List />, document.getElementById('app'));

Como @nilgun mencionado no comentário, você pode usar os auxiliares de imutabilidade de reação . Eu achei isso super útil.

Dos documentos:

Push simples

var initialArray = [1, 2, 3];
var newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]

initialArray ainda é [1, 2, 3].

Se você estiver usando componente funcional, use-o como abaixo.

const [chatHistory, setChatHistory] = useState([]); // define the state

const chatHistoryList = [...chatHistory, {'from':'me', 'message':e.target.value}]; // new array need to update
setChatHistory(chatHistoryList); // update the state

Para adicionar novo elemento à matriz, push()deve ser a resposta.

Para remover o elemento e atualizar o estado da matriz, o código abaixo funciona para mim. splice(index, 1)Não pode trabalhar.

const [arrayState, setArrayState] = React.useState<any[]>([]);
...

// index is the index for the element you want to remove
const newArrayState = arrayState.filter((value, theIndex) => {return index !== theIndex});
setArrayState(newArrayState);

Eu estou tentando empurrar o valor em um estado de matriz e definir um valor como este e definir a matriz de estado e empurrar o valor pela função de mapa.

 this.state = {
        createJob: [],
        totalAmount:Number=0
    }


 your_API_JSON_Array.map((_) => {
                this.setState({totalAmount:this.state.totalAmount += _.your_API_JSON.price})
                this.state.createJob.push({ id: _._id, price: _.your_API_JSON.price })
                return this.setState({createJob: this.state.createJob})
            })

Isso funcionou para eu adicionar uma matriz dentro de uma matriz

this.setState(prevState => ({
    component: prevState.component.concat(new Array(['new', 'new']))
}));

Aqui está um exemplo de 2020, Reactjs Hook, que pensei que poderia ajudar outras pessoas. Estou usando-o para adicionar novas linhas a uma tabela Reactjs. Deixe-me saber se eu poderia melhorar alguma coisa.

Incluindo um novo elemento em um componente de estado funcional:

Defina os dados do estado:

    const [data, setData] = useState([
        { id: 1, name: 'John', age: 16 },
        { id: 2, name: 'Jane', age: 22 },
        { id: 3, name: 'Josh', age: 21 }
    ]);

Ter um botão acionar uma função para adicionar um novo elemento

<Button
    // pass the current state data to the handleAdd function so we can append to it.
    onClick={() => handleAdd(data)}>
    Add a row
</Button>

function handleAdd(currentData) {

        // return last data array element
        let lastDataObject = currentTableData[currentTableData.length - 1]

        // assign last elements ID to a variable.
        let lastID = Object.values(lastDataObject)[0] 

        // build a new element with a new ID based off the last element in the array
        let newDataElement = {
            id: lastID + 1,
            name: 'Jill',
            age: 55,
        }

        // build a new state object 
        const newStateData = [...currentData, newDataElement ]

        // update the state
        setData(newStateData);

        // print newly updated state
        for (const element of newStateData) {
            console.log('New Data: ' + Object.values(element).join(', '))
        }

}

this.setState({
  arrayvar: [...this.state.arrayvar, ...newelement]
})

//------------------code is return in typescript 

const updateMyData1 = (rowIndex:any, columnId:any, value:any) => {

    setItems(old => old.map((row, index) => {
        if (index === rowIndex) {
        return Object.assign(Object.assign({}, old[rowIndex]), { [columnId]: value });
    }
    return row;
}));

Este código funciona para mim:

fetch('http://localhost:8080')
  .then(response => response.json())
  .then(json => {
    this.setState({mystate: this.state.mystate.push.apply(this.state.mystate, json)})
  })