карта не возвращает правильный массив объекта

Question

Пытался создать карту, чтобы установить значение выбранного на true и false, но это не меняет существующее истинное значение, что не так?

selectTab = tab => e => {
    const { data } = this.state;
    this.setState(
      {
        data: data.map(o =>
          o.tab === tab ? { selected: true, ...o } : { selected: false, ...o }
        )
      },
      () => console.log(this.state.data)
    );
  };

https://codesandbox.io/s/885l8q537l

Answer 1

Попробуйте сначала развернуть объект, а затем добавьте свойство selected.В противном случае свойство selected в o будет перезаписывать его каждый раз.

selectTab = tab => e => {
  this.setState(
    prevState => ({
      data: prevState.data.map(o =>
        o.tab === tab ? { ...o, selected: true } : { ...o, selected: false }
      )
    }),
    () => console.log(this.state.data)
  );
};

class App extends React.Component {
  state = {
    data: [
      {
        tab: 1,
        content: "Tab 1 content",
        selected: true
      },
      {
        tab: 2,
        content: "Tab 2 content"
      },
      {
        tab: 3,
        content: "Tab 3 content"
      }
    ]
  };

  selectTab = tab => e => {
    this.setState(
      prevState => ({
        data: prevState.data.map(o =>
          o.tab === tab ? { ...o, selected: true } : { ...o, selected: false }
        )
      }),
      () => console.log(this.state.data)
    );
  };
  
  render() {
    const { activeTab, data } = this.state;
    return (
      <div>
        {data.map(obj => (
          <div onClick={this.selectTab(obj.tab)}>{obj.tab}</div>
        ))}
        {data.map(obj => (
          <div>{obj.selected && obj.content}</div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>