javascript - 访问某个索引时数组返回未定义

Question

我正在使用 React 和 Redux 为一个网站编写此页面。我的问题是，当我尝试访问从商店获取的数组的索引时，我得到了未定义的值。但是将数组记录为一个整体，正确返回数组，下图描述了我想说的内容: ![Line 15 : console.log(this.props.reference) Line 16: console.log(this.props.reference[0])] 1

在第 16 行，我记录了映射到我的 props 的整个数组，这给出了预期的结果，但是当我记录 this.props.reference[0] 时，我得到了未定义的结果。这是我的代码供引用:

//rootreducer
const initState = {
    ref : []
}
const rootReducer = (state = initState, action) => {

    if (action.type === 'ADD_REF') {
        let updatedref = state.ref;
        updatedref[state.ref.length] = action.reference;
        return {
            ...state,
        ref: updatedref
        };
    }
    return state;
}

export default rootReducer;

//Navbar.js
import React from 'react';
import {Nav , Navbar , NavDropdown } from "react-bootstrap";
import logo from "./constants/logo.png"
import {connect} from 'react-redux';
class Navbarr extends React.Component {
    state = {

    }
    handleonClick = (num) => {
      //  console.log(this.props.reference)
      //  console.log(this.props.reference[0]);
        //this.props.reference[num].current.scrollintoView();
    }
    componentDidMount ()  {
        console.log(this.props.reference);
        console.log(this.props.reference[0]);
    }
    render() { 

        return (     
            <div>
             <Navbar bg="dark" expand="lg">
                <img src={logo} style={{padding: "15px" , width:"70px" , height: "70px"}}/>
                <Navbar.Brand style={{color: "white"}}></Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                        <Nav className="mr-auto">
                        <Nav.Link href="#home" style={{color: "white"}} onClick={this.handleonClick(0)} >About</Nav.Link>
                        <Nav.Link href="#home" style={{color: "white"}} >Interests</Nav.Link>
                        <Nav.Link href="#link"  style={{color: "white"}}>Projects</Nav.Link>
                        <Nav.Link href="#link"  style={{color: "white"}}>Experience</Nav.Link>
                        <Nav.Link href="#link"  style={{color: "white"}}>Skills</Nav.Link>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
            </div>
         );
    }
}

const mapStatetoProps = (state) => {
    return {
        reference: state.ref,
    }
}
const mapDispatchtoProps = (dispatch) => {
    return {
        addaboutref: (reference) => {dispatch({type: 'ADD_REF', reference: reference})},
    }
    }
export default connect(mapStatetoProps,mapDispatchtoProps)(Navbarr);

Answer 1

我敢打赌，当您的组件安装时，this.props.reference 是 []。如果对象更新，控制台消息也会更新，从而可能导致调试误导。

您也许可以等待 this.props.reference 以一定的间隔保存您需要的值。

componentDidMount ()  {
    this.interval = setInterval(() => {
        if (this.props.reference[0]) {
            this.props.reference[0].current.scrollintoView();
            clearInterval(this.interval)
        }
    }, 50)
}

componentWillUnmount() {
    clearInterval(this.interval)
}

间隔用于重复执行某个操作 ( https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval )。在上面的示例中，我们每 50 毫秒检查 this.props.reference 是否保存值。您可以将间隔保存到变量(上面代码中的 this.interval)，并使用 clearInterval 清除它以终止它。

尽管这可能会使组件正常工作，但如果引用具有值，则仅渲染此组件可能是更好的方法。