Question

var array= []



class Body extends Component {

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

现在，我知道我无法通过使用push更新状态内的“ oprArray”数组所以我在想什么，如果我在类外声明变量并更新该数组，然后在状态内部更新'oprArray'

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

Answer 1

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

要向您的oprArray中添加新项目，您可以这样做：

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

那个：

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

实时示例：

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>

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

1 个答案: