Question

我正在做数组排序。为此，我在状态中存储了两个变量，一个用于更改数组，默认情况下用于存储第二个数组，以便可以将原始数组返回。但是，更改时，两个数组都更改。我怎样才能解决这个问题？可以设置某种常数吗？请教些什么？我需要this.state.messagesDefault为常数。

class Messages extends Component {

  state = {
    messages: [],
    messagesDefault: []
  };

  componentDidMount() {
    this.props.getMessages();
  }

  componentWillReceiveProps(nextProps) {
    console.log(333)

    this.setState({
      messages: nextProps.messages.messages,
      messagesDefault: nextProps.messages.messages
    })
  }

  onSort(type) {
    // when i call this function both arrays are changing, but i need this.state.messagesDefault to stay by default
    let messagesDefault = this.state.messagesDefault;
    if (type === 'all') {

    } else if (type === 'new') {
      messagesDefault.sort((a, b) => (a.notReaded) ? -1 : (a.lastMessage === b.lastMessage) ? -1 : 1);
    } else if (type === 'deal') {
      messagesDefault.sort((a, b) => (a.lastMessage === b.lastMessage) ? 1 : (a.accpet && a.accpet.author && a.accpet.executor) ? -1 : 1);
    }
    // console.log(messagesDefault)
    this.setState({messages: messagesDefault})
  }

  render() {
    console.log(this.state.messages)
    return (
      <div>
</div>
)
}
}

Answer 1

Array.prototype.sort更改数组引用，以便更改实际的数组内容。您需要先进行复制。

const messagesDefault = [3,4,5,6,7, 1,8];

const messages = [...messagesDefault].sort();

console.log(messagesDefault);
console.log(messages);

如果您的数组包含对象，并且您想更改更新的数组对象，但又不想更改第一个对象，则您还需要复制这些对象，因为对象是引用。

let messagesDefault = [ { title: 'Hello' }, { title: 'World' }];

let messages = [...messagesDefault].sort((a, b) => b - a);
messages[0].title = 123;

console.log(messagesDefault);
console.log(messages);

messagesDefault = [ { title: 'Hello' }, { title: 'World' }];

messages = messagesDefault.map(obj => ({...obj})).sort((a, b) => b - a);
messages[0].title = 123;

console.log(messagesDefault);
console.log(messages);

// If objects are nested, you need to make a deep copy

reactjs常量状态进行排序

1 个答案: