Question

我有一个初始数组：1、2、3、4、5，并且想向数组中的每个项目加1。

代码如下：

import React from 'react';
import { from } from 'rxjs';
import { map } from 'rxjs/operators';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            fromArray: [1, 2, 3, 4, 5]
        };
    }

    componentDidMount() {
        const observable$ = from(this.state.fromArray).pipe(
            map(value => ({
                observable: value + 1
            }))
        );

        this._subscription = observable$.subscribe(
            result => this.setState({...result})
        )
    }

    componentWillUnmount() {
        this._subscription.unsubscribe();
    }

    render() {
        const { fromArray } = this.state;

        return (
            <ul>
                {
                    fromArray.map((item, index) => <li key={index}>{item}</li>)
                }
            </ul>
        )
    }
}

export default App;

但是，我只在列表中添加了初始数组。

如何使其工作？

Answer 1

Here是演示。这里有两个问题：

在class MyObject { lateinit var foo: String constructor(foo:String) { this.foo = foo } constructor() }函数中，您获得了array（2，3，4，5，6）的更新元素。但是您需要将新数组本身设置为状态。这就是为什么我使用map。
您需要指定要设置的状态的哪一部分。不是这样：reduce，而是这样：result => this.setState({...result})

newFromArray => this.setState({ fromArray: newFromArray })

如何在React中的可观察数组中设置新的语言环境状态？

1 个答案: