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

使用reduce创建一个新对象，然后使用this.setState()通过一次简单的移动最终设置state。

还要注意，只设置一次状态并使用react提供的功能会更有性能。与documentation says

一样直接将状态设置为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 2

尝试

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)

Answer 3

类似以下的方法应该起作用：

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

将字符串数组映射到React-Native / ES6中的组件状态

3 个答案: