Javascript 数组设置为[]时未清除

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

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

this.arr = [];

然后使用

ref

使用以下代码将我需要的组件推送到阵列：

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

---

通过在状态下进行管理，您可以执行以下操作

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'));

---

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

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'));

试一试

this.arr.length=0

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

不太熟悉React，但我猜，只要将数组设置为新的数组实例，视图引用的数组实例就会丢失
 试试看

this.arr.length=0

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

不太熟悉React，但我猜，只要将数组设置为新的数组实例，视图引用的数组实例就会丢失
 因为
中的
x
“ref”={x=>…}
可以并且将在第一次调用时为
null
，然后在react第二次调用时为组件的引用，因此，如果您不希望数组中的
null
，您需要在存储它之前检查
x
是否为null，因为
中的
x
“ref”={x=>…}
可以并且将在第一次调用时为
null
，然后在react第二次调用它时成为您组件的引用，因此，如果您不希望数组中的
null
，则需要在存储它之前对
x
进行检查，以确定是否为null
谢谢您的帮助，但这不是我正在寻找的解决方案。我想知道的是，为什么数组包含两个额外的
null
sy您可以执行null检查，然后推入数组pushToRef=（ref）=>{if（ref！=null）{this.setState（prevState=>（{arr:[…prevState.arr，ref]}）；}谢谢您的帮助，但这不是我想要的解决方案。我想知道的是，为什么数组包含两个额外的
null
sy您可以执行null检查，然后推入数组pushToRef=（ref）=>{if（ref！=null）{this.setState（prevState=>（{arr:[…prevState.arr，ref]}；}谢谢您的帮助，但这并没有解决问题，还有两个额外的
null
s loggedthank寻求帮助，但这并没有解决问题，还有两个额外的
null
s loggedthank，是的，这似乎是问题的根源，但为什么
x
可能是null？没有线索，这就是它的反应，是的，这似乎是问题的根源，但是为什么
x
可以为空？我不知道，这就是它的反应