Сопоставить массив строк с состояниями компонентов в React-Native / ES6

Question

У меня есть такой компонент:

export default class Demo extends Component{
    constructor(props){
        super(props)
        this.state = {
           str1: '',
           str2: '',
           str3: '',
           str4: '',
        }
    }

........
}

И строка похожа на aaa-bbb-ccc-dd

Как их разделить и добавить в состояние компонента. Моя цель что-то вроде:

str1: 'aaa',
str2: 'bbb',
str3: 'ccc',
str4: 'dd'

Answer 1

Должно работать что-то вроде следующего:

const str = "aaa-bbb-ccc-dd"; 
const arr = srt.split("-");   
this.setState({str1 : arr[0],str2 : arr[1], str3: arr[2], str4 : arr[3]});

Answer 2

Создайте новый объект, используя reduce, а затем используйте this.setState(), чтобы окончательно установить state всего одним простым движением.

Также обратите внимание, что более целесообразно установить состояние только один раз и использовать функцию, предоставленную реагировать. Установка состояния напрямую, например state[bar] = foo, является плохой практикой, поскольку документация гласит:

let string = "aaa-bbb-ccc-dd";

const newState = string.split('-').reduce((a, c, i) => {
    a[`str${i+1}`] = c;
    return a;
}, {})

this.setState(newState)

Answer 3

Попробуйте

let s = "aaa-bbb-ccc-dd";

let state = {}
        
s.split('-').forEach((x,i)=> state[`str${i+1}`]=x )

console.log(state);

// and set state using this.setState(state)