Массив, возвращающий неопределенный при доступе к определенному индексу

Question

Я пишу эту страницу для веб-сайта, использующего реагирование и редукцию. Моя проблема в том, что когда я пытаюсь получить доступ к индексу массива, который я получаю из магазина, я получаю неопределенное значение. Но запись массива в целом вернет массив правильно, следующее изображение описывает то, что я пытаюсь сказать: ! [Строка 15: console.log (this.props.reference) Строка 16: console.log (this.props .reference [0])] 1

В строке 16 я записываю весь массив, который сопоставлен с моим реквизитом, который дает ожидаемый результат, но когда я регистрирую это. 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). В приведенном выше примере мы проверяем, содержит ли this.props.reference значения каждые 50 миллисекунд. Вы можете сохранить интервал в переменной (this.interval в приведенном выше коде) и очистить его с помощью clearInterval, чтобы завершить его.

Несмотря на то, что это может заставить компонент работать, это может быть лучшим подходом только к визуализировать этот компонент, если ссылка имеет значения.