Потеря контекста на карте

Question

Я пытаюсь добавить новые столбцы в мой массив состояния компонентов.Но я получаю неопределенное значение.Я не могу понять, как связать это

const data = SberData;

class App extends Component {

constructor(props) {
    super(props);

    this.state = {
        data: [],
        columns: [
            {Header: 'value1'},
            {Header: 'value2'}
        ]
    }
}

componentDidMount() {
    data.map((element) => {
            return this.setState(state => ({
                        columns: [...state.columns, {Header: element.value}]
                    }
                )
            )
        }
    )
}

и что я получу:

0: {Header: "value1"}
1: {Header: "value2"}
2: {Header: undefined}
3: {Header: undefined}

Answer 1

Мы обнаружили в комментариях, что у элементов просто нет свойства value, но я все же предлагаю немного улучшить код, подготовить данные и затем вызвать setState() один раз, например:

componentDidMount() {
  const newColumns = data.map(element => ({Header: element.value}));
  this.setState(state => ({
    columns: [...state.columns, newColumns]
  });
}