Prawidłowa modyfikacja tablic stanu w ReactJS

Chcę dodać element na końcu statetablicy, czy to właściwy sposób, aby to zrobić?

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

Obawiam się, że modyfikowanie tablicy w miejscu pushmoże powodować problemy - czy jest to bezpieczne?

Alternatywa tworzenia kopii tablicy i setStateing wydaje się marnotrawstwem.

Dokumentacja React mówi:

Traktuj ten stan jak gdyby był niezmienny.

Twój pushbędzie mutować stanu bezpośrednio i które potencjalnie mogłyby prowadzić do błędu kodu na brzuchu, nawet jeśli są „zerowania” stan ponownie później. F.ex, może to prowadzić do tego, że niektóre metody cyklu życia, takie jak componentDidUpdatenie, zostaną uruchomione.

Zalecanym podejściem w późniejszych wersjach React jest użycie funkcji aktualizującej podczas modyfikowania stanów w celu uniknięcia warunków wyścigu:

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

„Marnotrawstwo” pamięci nie stanowi problemu w porównaniu z błędami, które możesz napotkać przy użyciu niestandardowych modyfikacji stanu.

Alternatywna składnia dla wcześniejszych wersji React

Możesz użyć, concataby uzyskać czystą składnię, ponieważ zwraca ona nową tablicę:

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

W ES6 możesz użyć operatora Spread :

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

Najłatwiej, jeśli używasz ES6.

initialArray = [1, 2, 3];

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

Nowa tablica będzie [1,2,3,4]

zaktualizować swój stan w React

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

Dowiedz się więcej o destrukcji macierzy

Najprostszy sposób z ES6:

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

React może aktualizować wsadowo, dlatego poprawnym podejściem jest zapewnienie setState funkcji, która wykonuje aktualizację.

W przypadku dodatku do aktualizacji React niezawodnie będą działać:

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

lub dla concat ():

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

Poniżej pokazano, co https://jsbin.com/mofekakuqi/7/edit?js,output jako przykład tego, co się stanie, jeśli się pomylisz.

Wywołanie setTimeout () poprawnie dodaje trzy elementy, ponieważ React nie grupuje aktualizacji w ramach wywołania zwrotnego setTimeout (patrz https://groups.google.com/d/msg/reactjs/G6pljvpTGX0/0ihYw2zK9dEJ ).

Buggy onClick doda tylko „Trzeci”, ale naprawiony doda F, S i T zgodnie z oczekiwaniami.

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'));

Jak wspomniano w komentarzu @nilgun, możesz użyć pomocników immutability . Uważam, że jest to bardzo przydatne.

Z dokumentów:

Proste naciśnięcie

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

initialArray jest nadal [1, 2, 3].

Jeśli używasz komponentu funkcjonalnego, użyj tego jak poniżej.

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

Na dodany nowy element do tablicy push()powinna być odpowiedź.

W przypadku usuwania elementu i aktualizacji stanu tablicy poniższy kod działa dla mnie. splice(index, 1)nie mogę pracować.

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);

Próbuję przekazać wartość w stanie tablicowym i ustawić taką wartość, a także zdefiniować tablicę stanu i wartość wypychaną za pomocą funkcji mapy.

 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})
            })

Pomogło mi to dodać tablicę w tablicy

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

Oto przykład Reactjs Hook na rok 2020, który moim zdaniem mógłby pomóc innym. Używam go do dodawania nowych wierszy do tabeli Reactjs. Daj mi znać, czy mogę coś poprawić.

Dodanie nowego elementu do funkcjonalnego komponentu stanu:

Zdefiniuj dane stanu:

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

Niech przycisk uruchamia funkcję dodawania nowego elementu

<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;
}));

Ten kod działa dla mnie:

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