Question

在我的代码中，我有多个组件，每个组件都有不同的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

我应该如何解决这个问题？

要了解我为什么这样做：How can I make a list of integers click on element with corresponding id?

Answer 1

要实现此目的，您需要了解ref的工作方式。引用 object 只是React在渲染之间保留的对象。它是一个看起来像{ current: null }的对象。因此，您可以为当前属性分配任何内容。

如果引用属性被传递了引用对象（例如React.createRef()），则引用对象的 current设置为组件的DOM元素。

如果将引用属性传递给引用函数，则该函数将传递组件的DOM元素。

在这种情况下，您需要首先为创建的ref对象分配一个数组，并使用回调ref来分配render()

中的值

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>
        )
    }
}

Answer 2

构造函数中有this.pinterestRefs = React.createRef（）。

pinterestRefs不是数组，您不能将其压入其中。

我对react不太熟悉，但是您可以通过以下链接在第一个评论上找到答案：https://dev.to/ajsharp/-an-array-of-react-refs-pnf

如何将引用存储在数组中？

2 个答案: