Lưu trữ một đối tượng trong trạng thái của một thành phần React?

Có thể lưu trữ một đối tượng ở trạng thái của một thành phần React không? Nếu có, thì chúng ta có thể thay đổi giá trị của một khóa trong đối tượng đó bằng cách setStatenào? Tôi nghĩ về mặt cú pháp không được phép viết những thứ như:

this.setState({ abc.xyz: 'new value' });

Trên các dòng tương tự, tôi có một câu hỏi khác: Có ổn không khi có một tập hợp các biến trong một thành phần React để chúng có thể được sử dụng trong bất kỳ phương thức nào của thành phần đó, thay vì lưu trữ chúng trong một trạng thái?

Bạn có thể tạo một đối tượng đơn giản chứa tất cả các biến này và đặt nó ở cấp thành phần, giống như cách bạn khai báo bất kỳ phương thức nào trên thành phần.

Nó rất có thể gặp phải các tình huống trong đó bạn đưa nhiều logic nghiệp vụ vào mã của mình và yêu cầu sử dụng nhiều biến có giá trị được thay đổi bằng một số phương pháp và sau đó bạn thay đổi trạng thái của thành phần dựa trên các giá trị này.

Vì vậy, thay vì giữ tất cả các biến đó ở trạng thái, bạn chỉ giữ những biến có giá trị phải được phản ánh trực tiếp trong giao diện người dùng.

Nếu cách tiếp cận này tốt hơn câu hỏi đầu tiên tôi đã viết ở đây, thì tôi không cần phải lưu trữ một đối tượng trong trạng thái.

Ngoài bài đăng của kiran, còn có trình trợ giúp cập nhật (trước đây là một addon phản ứng ). Điều này có thể được cài đặt với npm bằng cách sử dụngnpm install immutability-helper

import update from 'immutability-helper';

var abc = update(this.state.abc, {
   xyz: {$set: 'foo'}
});

this.setState({abc: abc});

Điều này tạo ra một đối tượng mới với giá trị được cập nhật và các thuộc tính khác được giữ nguyên. Điều này hữu ích hơn khi bạn cần thực hiện những việc như đẩy vào một mảng và đặt một số giá trị khác cùng một lúc. Một số người sử dụng nó ở mọi nơi vì nó cung cấp tính bất biến.

Nếu bạn làm điều này, bạn có thể có những thứ sau để bù đắp cho hiệu suất của

shouldComponentUpdate: function(nextProps, nextState){
   return this.state.abc !== nextState.abc; 
   // and compare any props that might cause an update
}

1. this.setState({ abc.xyz: 'new value' });cú pháp không được phép. Bạn phải vượt qua toàn bộ đối tượng.

   this.setState({abc: {xyz: 'new value'}});
   

   Nếu bạn có các biến khác trong abc

   var abc = this.state.abc;
   abc.xyz = 'new value';
   this.setState({abc: abc});
   

2. Bạn có thể có các biến thông thường, nếu chúng không dựa vào this.props và this.state.

Bạn có thể sử dụng ES6 lây lan trên các giá trị trước đó trong đối tượng để tránh ghi đè

this.setState({
     abc: {
            ...this.state.abc,
            xyz: 'new value'
           }
});

this.setState({abc: {xyz: 'new value'}});sẽ KHÔNG hoạt động, vì state.abcsẽ được ghi đè hoàn toàn, không được hợp nhất.

Điều này phù hợp với tôi:

this.setState((previousState) => {
  previousState.abc.xyz = 'blurg';
  return previousState;
});

Trừ khi tôi đọc nhầm tài liệu, Facebook đề xuất định dạng trên. https://facebook.github.io/react/docs/component-api.html

Ngoài ra, tôi đoán cách trực tiếp nhất mà không gây đột biến trạng thái là sao chép trực tiếp bằng cách sử dụng toán tử spread / rest của ES6:

const newState = { ...this.state.abc }; // deconstruct state.abc into a new object-- effectively making a copy
newState.xyz = 'blurg';
this.setState(newState);

Mặc dù nó có thể được thực hiện thông qua trình trợ giúp không thay đổi hoặc tương tự, tôi không thể thêm các phụ thuộc bên ngoài vào mã của mình trừ khi tôi thực sự phải làm. Khi tôi cần làm điều đó, tôi sử dụng Object.assign. Mã:

this.setState({ abc : Object.assign({}, this.state.abc , {xyz: 'new value'})})

Cũng có thể được sử dụng trên Thuộc tính sự kiện HTML, ví dụ:

onChange={e => this.setState({ abc : Object.assign({}, this.state.abc, {xyz : 'new value'})})}

Cách dễ dàng hơn để làm điều đó trong một dòng mã

this.setState({ object: { ...this.state.object, objectVarToChange: newData } })