javascript - 我可以在reactjs的类外声明全局变量吗

var array= []



class Body extends Component {

state= {
 input: '',
 oprStatus: false,
 check: false,
 count: 0,
 oprArray: null
} }

现在，因为我知道我无法通过使用推来更新状态内的“ oprArray”数组
所以我在想什么，如果我在类外声明一个变量并更新该数组，然后在状态内更新“ oprArray”，该怎么办？

array.push(2);
this.setState({
 oprArray: array
)}

最佳答案

那并不能解决问题，因为您仍然会在改变状态而不是设置新状态。首次将oprArray: array设置为状态后，状态和全局array变量都指向同一数组。下次，push直接修改状态-这是对React状态的禁止。

要将新项目添加到您的oprArray中，您可以这样操作：

this.setState(({oprArray}) => ({oprArray: [...oprArray, 2]}));

那：

使用setState的回调形式，当您根据现有状态（oprArray的先前内容）修改状态（带有新条目2的新oprArray）时，这是必需的。
通过扩展符号创建一个具有其他项目的新数组。

现场示例：

const {Component} = React;

class Body extends Component {
    state = {
     input: '',
     oprStatus: false,
     check: false,
     count: 0,
     oprArray: null
    };

    componentDidMount() {
        // Since your state starts with `null`, I assume you receive initial data
        // via ajax or similar; emulated here with a timeout
        setTimeout(() => {
            this.setState({oprArray: [0, 1]}); // Initial data isn't based on existing state
            // Now set up getting more data later
            setTimeout(() => {
                // Additional data
                this.setState(({oprArray}) => ({oprArray: [...oprArray, 2]}));
            }, 800);
        }, 800);
    }

    render() {
        const {oprArray} = this.state;
        return (
            <div>oprArray: {oprArray ? oprArray.join(", ") : "(none)"}</div>
        );
    }
}

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

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