Question

在这种情况下，我需要在数组中存储组件的引用。

当调用render方法时，我通过以下代码清除数组：

this.arr = [];

，然后使用ref使用以下代码将所需的组件推入数组：

<span ref={ref => this.arr.push(ref)} />

问题在于，首先渲染数组具有所有两个组件，但是在后期渲染中，数组返回所有组件，但带有另外两个null。

查看此示例：

class Test extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state = {value: 0};
        this.arr = [];
    }

    render()
    {
        this.arr = [];
        return (
            <div>
                <span ref={ref => this.arr.push(ref)}>Span 1/</span>
                <span ref={ref => this.arr.push(ref)}>Span 2</span>
                <br/>
                <b>Array Length = {this.state.value}</b>
                <button onClick={this.onClick}>GET LENGTH</button>
            </div>
        );
    }

    onClick = () =>
    {
        console.log(this.arr);
        this.setState({value: this.arr.length});
    }

}



ReactDOM.render( <Test></Test> , document.getElementById('root'));

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
</head>


<body>
<div id="root"></div>
</body>

</html>

任何人都可以解释为什么我会发生这种情况以及为什么将数组设置为[]后无法清除该数组，以及如何解决此问题

Answer 1

您可以通过状态管理来执行以下操作

class Test extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state = {value: 0, arr: []};
    }

      pushToRef = (ref) => {
        if(ref != null){
           this.setState(prevState => ({
             arr: [...prevState.arr, ref]
           }));
        }
      }
    render()
    {
        return (
            <div>
                <span ref={ref => this.pushToRef(ref)}>Span 1/</span>
                <span ref={ref => this.pushToRef(ref)}>Span 2</span>
                <br/>
                <b>Array Length = {this.state.value}</b>
                <button onClick={this.onClick}>GET LENGTH</button>
            </div>
        );
    }

    onClick = () =>
    {
        console.log(this.state.arr);
        this.setState({value: this.state.arr.length});
    }

}



ReactDOM.render( <Test></Test> , document.getElementById('root'));

除了渲染外，您可以在任何需要的地方清空状态。像下面这样

let arr = [];
thi.setState({
   arr: arr
});

Answer 2

尝试

this.arr.length = 0;

您正在将变量重新初始化为新的空数组实例。

对React不太熟悉，但是我猜测是，一旦将数组设置为新的数组实例，该视图所引用的数组实例就会丢失；

Answer 3

因为x中的"ref"={x => ...}在第一次调用时可以并且将是null，然后在第二次响应调用时将成为对您组件的引用，因此如果您不想要null位于您的数组中，您需要在存储之前检查x是否为空

设置为[]时未清除数组

3 个答案: