Javascript 如何在数组中存储ref？

在我的代码中，我有多个组件，每个组件都有不同的id。 我需要给它们每个都附加一个参考号。但是，我得到一个错误，上面说：

TypeError: _this3.pinterestRefs.push

这是我的密码：

import React, { Component } from 'react'
import InterestBox from './InterestBox'
import Axios from 'axios'

export class InterestList extends Component {

    constructor(props) {
        super(props);
        this.state = {pinterests: []}
        this.pinterestRefs = React.createRef()
    }

    componentDidMount() {
        Axios.get('http://localhost:8000/api/interests')
        .then((success) => {
            this.setState({pinterests: success.data.data.interests});
        })
    }

    componentDidUpdate(prevProps) {
        console.log(JSON.stringify(prevProps));
        console.log(JSON.stringify(this.props))
        if(this.props.alreadyChecked != prevProps.alreadyChecked) {
            this.props.alreadyChecked.forEach((item) => {
                console.log(item)
            })
        }
        console.log(this.refs)
    }

    render() {
        return (
            <React.Fragment>
                {Object.keys(this.state.pinterests).map((interest) => {
                    var pinterest = this.state.pinterests[interest];
                    return <InterestBox id={pinterest.id} onClick={this.props.onClick} icon={pinterest.picture_src} title={pinterest.name} ref={pinterestRef => this.pinterestRefs.push(pinterestRef)} />
                })}
            </React.Fragment>
        )
    }
}

export default InterestList

import React，{Component}来自“React”
从“./InterestBox”导入InterestBox
从“Axios”导入Axios
导出类兴趣列表扩展组件{
建造师（道具）{
超级（道具）；
this.state={pinterests:[]}
this.pinterestRefs=React.createRef（）
}
componentDidMount（）{
Axios.get（）http://localhost:8000/api/interests')
。然后（（成功）=>{
this.setState（{pinterests:success.data.data.interests}）；
})
}
componentDidUpdate（prevProps）{
log（JSON.stringify（prevProps））；
log（JSON.stringify（this.props））
如果（this.props.alreadyChecked！=prevProps.alreadyChecked）{
this.props.alreadyChecked.forEach（（项）=>{
console.log（项目）
})
}
console.log（this.refs）
}
render（）{
返回(
{Object.keys（this.state.pinterests）.map（（兴趣）=>{
var pinterest=this.state.pinterests[interest]；
返回此.pinterestRefs.push（pinterestRef）}/>
})}
)
}
}
导出默认兴趣列表

我该如何解决这个问题

---

要理解我为什么这样做：

在构造函数中有这个.pinterestRefs=React.createRef（）

pinterestRefs不是一个数组，您无法将其推入

---

我对react不太熟悉，但从下面的链接中，您的答案可能会出现在第一条评论上：

要做到这一点，您需要了解REF是如何工作的。ref对象只是一个位于渲染之间的对象。它是一个看起来像

{current:null}

的对象。因此，可以将任何内容指定给当前属性

如果ref属性被传递给ref对象（例如

React.createRef（）

），则ref对象的当前设置为组件的DOM元素

如果ref属性被传递给ref函数，则该函数被传递给组件的DOM元素

在这种情况下，首先需要为创建的ref对象指定一个数组，并使用回调refs在

render（）中指定值

导出类兴趣列表扩展组件{
建造师（道具）{
/*其他构造函数代码*/
this.pinterestRef=React.createRef（）；
this.pinterestRef.current=[]；//这是用来保存要存储的节点的数组
}
/*组件代码的其余部分*/
渲染（）{
返回(
{Object.keys（this.state.pinterests）.map（（兴趣，i）=>{
var pinterest=this.state.pinterests[interest]；
var callbackRef=node=>pinterestRef.current[i]=node；//此函数将传递给存储在索引“i”的pinterestRef.current中的节点
返回
})}
)
}
}

export class InterestList extends Component {
    constructor(props) {
        /* Other constructor code */
        this.pinterestRef = React.createRef();
        this.pinterestRef.current = []; // This is the array to keep the nodes we want to store
    }

    /* Rest of component code */

    render () {
        return (
            <React.Fragment>
                {Object.keys(this.state.pinterests).map((interest, i) => {
                    var pinterest = this.state.pinterests[interest];
                    var callbackRef = node => pinterestRef.current[i] = node; // This function will be passed our node that is stored in the pinterestRef.current at index "i"
                    return <InterestBox id={pinterest.id} onClick={this.props.onClick} icon={pinterest.picture_src} title={pinterest.name} ref={callbackRef} />
                })}
            </React.Fragment>
        )
    }
}