reactjs React- createRef()API -此.子.当前为空

xyhw6mcr 于 2023-03-01 发布在 React

关注(0)|答案(2)|浏览(248)

为了允许parent component（JsonFetcher）访问child component（Display）中的值，我尝试使用补丁16.3中的createRef() API
下面是我在this document中的"添加对类Component的引用"示例中所做的尝试：

class JsonFetcher extends Component {
    constructor(props) {
        super(props);
        this.child = React.createRef();
        this.state = {
            data: [],
        }
    }

    componentDidMount() {   
        this.updateContent(this.props.mainUrl)
    }

    updateContent(mainUrl){
        fetch(mainUrl)
            .then((responseJsonAnyUrl) => responseJsonAnyUrl.json())
            .then((responseJsonAnyUrl) => {
                this.setState({
                    mainUrl: mainUrl,
                    jsonObject: responseJsonAnyUrl
                },
                function () {
                    this.timeout = setTimeout(
                        function(){
                            //let ind = this.child.current.getCurrentIndex
                            //tyring to get values from child...
                            //if index === length-1
                                this.updateContent(mainUrl)
                            //else    
                            //retry this function in 5 seconds
                            // 
                        }.bind(this, mainUrl)
                        ,
                        20000)
                }.bind(this))
            })
    }

    interpretJson() {
        /*
        *some code
        */            
        return(
            <Display content={contentListArray} ref={this.child}/>
        )
    }

    render() {
        if(this.state.jsonObject){
            return (
                <div>
                    <div> {this.interpretJson()} </div>
                </div>
            )
        }else
            return(
                null
            )                
    }
}

因此，我在构造函数中创建了ref，将其链接到interpretJson()方法末尾的child componentDisplay，然后尝试在timeOut()函数中使用子方法，但是我得到了以下错误：

*"类型错误：无法读取空"**"的属性"getCurrentIndex"

我做错了什么，不允许我调用子方法，这样我就可以模拟我注解的伪代码了？
（编辑）注解：

我的子组件Display不是无状态组件，它是一个类。
我已经尝试在渲染中调用<Display>，但是

问题仍然存在。

reactjs

来源：https://stackoverflow.com/questions/49985819/react-createref-api-this-child-current-is-null

2条答案

按热度按时间

yhxst69z1#

使用arrow函数将此方法绑定到类。这样，this.child中的this将绑定到类组件

interpretJson = () => {
    /*
    *some code
    */            
    return(
        <Display content={contentListArray} ref={this.child}/>
    )
}

如果以上答案不起作用，则执行此操作

constructor(props) {
        super(props);
        this.interpretJson = this.interpretJson.bind(this);//bind function to class
        this.child = React.createRef();
        this.state = {
            data: [],
        }

 }
 interpretJson() {
        /*
        *some code
        */            
        return(
            <Display content={contentListArray} ref={this.child}/>
        )
    }

赞(0）回复(0）举报 2023-03-01

xa9qqrwz2#

我也遇到了这个问题（我使用的是typescript）

private modal = React.createRef<HTMLDivElement>()

// ...

public componentDidMount() {
  console.log(this.modal)
}

// ...

public render() {
// ...
  <div ref={this.modal} className="modal fade"
  // ...

输出。from start为空，然后在一段时间后填充：

问题是在render方法中我提前退出了，并且没有到达ref代码

public render() {
  const { data } = this.state

  // here we return early, ref bellow is not reached
  // and in componentDidmount we can't rely on this.modal.current
  // this.modal.current will be populated only if data is not null
  if (data === null) { return null }

  return (
    <div ref={this.modal} className="modal fade"
    // ...

以下示例中的示例存在相同问题