Sửa đổi chính xác các mảng trạng thái trong ReactJS

Tôi muốn thêm một phần tử vào cuối một statemảng, đây có phải là cách chính xác để làm điều đó?

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

Tôi lo ngại rằng việc sửa đổi mảng tại chỗ có pushthể gây rắc rối - có an toàn không?

Việc thay thế tạo một bản sao của mảng và setStateing có vẻ lãng phí.

Các tài liệu React nói:

Hãy đối xử với điều này.state như thể nó là bất biến.

Ý chí của bạn pushsẽ thay đổi trạng thái trực tiếp và điều đó có khả năng dẫn đến mã dễ bị lỗi, ngay cả khi bạn "đặt lại" trạng thái đó sau đó. F.ex, nó có thể dẫn đến một số phương pháp vòng đời như componentDidUpdatesẽ không kích hoạt.

Cách tiếp cận được đề xuất trong các phiên bản React sau này là sử dụng chức năng cập nhật khi sửa đổi trạng thái để ngăn chặn điều kiện cuộc đua:

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

Bộ nhớ "lãng phí" không phải là vấn đề so với các lỗi bạn có thể gặp phải khi sử dụng các sửa đổi trạng thái không chuẩn.

Cú pháp thay thế cho các phiên bản React trước đó

Bạn có thể sử dụng concatđể có được một cú pháp rõ ràng vì nó trả về một mảng mới:

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

Trong ES6, bạn có thể sử dụng Toán tử trải rộng :

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

Dễ nhất, nếu bạn đang sử dụng ES6.

initialArray = [1, 2, 3];

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

Mảng mới sẽ là [1,2,3,4]

để cập nhật trạng thái của bạn trong React

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

Tìm hiểu thêm về phá hủy mảng

Cách đơn giản nhất với ES6:

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

React có thể cập nhật hàng loạt và do đó, cách tiếp cận đúng là cung cấp cho setState một chức năng thực hiện cập nhật.

Đối với addon cập nhật React, phần sau sẽ hoạt động đáng tin cậy:

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

hoặc cho concat ():

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

Sau đây cho thấy https://jsbin.com/mofekakuqi/7/edit?js,output là một ví dụ về những gì xảy ra nếu bạn hiểu sai.

Lệnh gọi setTimeout () thêm chính xác ba mục vì React sẽ không cập nhật hàng loạt trong một cuộc gọi lại setTimeout (xem https://groups.google.com/d/msg/reactjs/G6pljvpTGX0/0ihYw2zK9dEJ ).

Lỗi onClick sẽ chỉ thêm "Thứ ba", nhưng lỗi cố định, sẽ thêm F, S và T như mong đợi.

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

Như @nilgun đã đề cập trong bình luận, bạn có thể sử dụng các trợ giúp bất biến phản ứng . Tôi thấy điều này là siêu hữu ích.

Từ các tài liệu:

Đẩy đơn giản

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

initArray vẫn là [1, 2, 3].

Nếu bạn đang sử dụng thành phần chức năng xin vui lòng sử dụng này như dưới đây.

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

Để thêm phần tử mới vào mảng, push()nên là câu trả lời.

Để loại bỏ phần tử và trạng thái cập nhật của mảng, mã bên dưới hoạt động với tôi. splice(index, 1)không thể làm việc.

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

Tôi đang cố gắng đẩy giá trị trong trạng thái mảng và đặt giá trị như thế này và xác định mảng trạng thái và giá trị đẩy theo chức năng bản đồ.

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

Điều này làm việc cho tôi để thêm một mảng trong một mảng

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

Đây là một ví dụ năm 2020, Reactjs Hook mà tôi nghĩ có thể giúp đỡ người khác. Tôi đang sử dụng nó để thêm các hàng mới vào bảng Reactjs. Hãy cho tôi biết nếu tôi có thể cải thiện một cái gì đó.

Thêm một phần tử mới vào một thành phần trạng thái chức năng:

Xác định dữ liệu trạng thái:

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

Có một nút kích hoạt một chức năng để thêm một yếu tố mới

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

Mã này hoạt động với tôi:

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