Reactでレンダリングの際の定数記述、React-tinder-card

Question

ReactのReact-tinder-cardを使用してswipe機能を実装しようとしています。

やりたいこととしては、
１、データの読み込み
２、マウス操作による、スワイプ
３、ボタンを押してのスワイプ

１、２は実装できたのですが、３は実装することができていません。

個人的には、データきちんと読み込む前に定数などに代入してしまっているのが原因でボタン操作での処理が実行できいないと思っています。

対策、または別途記述方法あるのであれば教えて欲しいです。

（バックエンドはRails,、フロントはReactで作成しています。）

import { REQUEST_STATE } from '../constants'

export const initialState = {
  fetchState:REQUEST_STATE.INITIAL,
  wordlist:[],
  arrylength:2850
}

export const wordsActionTypes = {
  FETCHING: 'FETCHING',
  FETCH_SUCCESS: 'FETCH_SUCCESS'

}

export const wordsReducer = (state, action) => {
  switch (action.type) {
    case wordsActionTypes.FETCHING:
      return {
        ...state,
        fetchState: REQUEST_STATE.LOADING,
      };
    case wordsActionTypes.FETCH_SUCCESS:
      return {
        fetchState: REQUEST_STATE.OK,
        wordlist: action.payload.wordtype,
        arrylength: action.payload.wordtype.length
      };
    default:
      throw new Error();
  }
}

import React, { useState, useMemo, useRef, useReducer, useEffect } from 'react'
import { Link }  from "react-router-dom"
import TinderCard from "react-tinder-card";
import "./TinderCards.css";
import SwipeCard from "./SwipeCard"


import {
  initialState,
  wordsActionTypes,
  wordsReducer
} from "../../../reducers/wordtype"

const Wordcard = (props) => {
  const { wtype } = props
 
  return (
    <>
      <h2>{wtype}ページ</h2>
      <Link to="/list">・Listページに戻る</Link>
      <SwipeCard wtype={wtype} len={len} />
    </>
    )
}

export default Wordcard

import React from 'react'
import Wordcard from "./Wordcard"

const Ngsl = () => {
  const wtype = "NGSL"
    return (
      <>
        <Wordcard wtype={wtype} />
      </>
    )
}

export default Ngsl

import React, { useState, useMemo, useRef, useEffect, useReducer } from 'react'
import { Link }  from "react-router-dom"
import TinderCard from "react-tinder-card";
import "./TinderCards.css";

import {
  initialState,
  wordsActionTypes,
  wordsReducer
} from "../../../reducers/wordtype"

import { getEnglishlist } from "../../../lib/api/englishlist"

const SwipeCard = (props) => {
  const { wtype, len } = props
  const [state, dispatch] = useReducer(wordsReducer, initialState)

  useEffect(() => {
    dispatch({type:wordsActionTypes.FETCHING})
    getEnglishlist()
    .then((data) =>
      dispatch({
        type:wordsActionTypes.FETCH_SUCCESS,
        payload: {
          wordtype:data.wordlist.filter(type => {
            return (
              type.wordtype === wtype
            )
          })
        }
      })
    )
  },[])

  const worddata = state.wordlist
  const [words, setWords] = useState()
  const [currentIndex, setCurrentIndex] = useState(state.arrylength)
  const [lastDirection, setLastDirection] = useState()
  const [show, setShow] = useState(false)
  const currentIndexRef = useRef(currentIndex)

  const childRefs = useMemo(
    () =>
      Array(worddata.length)
        .fill(0)
        .map((i) => React.createRef()),
    []
  )

  const updateCurrentIndex = (val) => {
    setCurrentIndex(val)
    currentIndexRef.current = val
  }

  console.log(state.arrylength)

  const canGoBack = currentIndex < worddata.length - 1

  const canSwipe = currentIndex >= 0

  const swiped = (direction, index) => {
    setLastDirection(direction)
    updateCurrentIndex(index - 1)
  }


  const outOfFrame = (name, idx) => {
   console.log(`${name} (${idx}) left the screen!`, currentIndexRef.current)
   // handle the case in which go back is pressed before card goes outOfFrame
   currentIndexRef.current >= idx && childRefs[idx].current.restoreCard()
   // TODO: when quickly swipe and restore multiple times the same card,
   // it happens multiple outOfFrame events are queued and the card disappear
   // during latest swipes. Only the last outOfFrame event should be considered valid
  }

  const swipe = async (dir) => {
    if (canSwipe && currentIndex < worddata.length) {
      await childRefs[currentIndex].current.swipe(dir) // Swipe the card!
    }
  }

  const goBack = async () => {
    if (!canGoBack) return;
    const newIndex = currentIndex + 1;
    updateCurrentIndex(newIndex);
    await childRefs[newIndex].current.restoreCard();
  }


  return (
    <>
      <p>{worddata.length}</p>

      <div className="Swipe">
      {
        worddata.map((word, index) =>
          <TinderCard
            ref={childRefs[index]}
            className='swipe'
            key={word.word}
            onSwipe={(dir) => swiped(dir, index)}
            onCardLeftScreen={() => outOfFrame(index)}
          >
            <div className="Card" key={word.id}>
              {word.word}
              /
              {word.id}
              /
              {index}
              /
              {currentIndex}
              <br />
              <button onClick={() => setShow(!show)}>意味を表示</button>
            </div>
          </TinderCard>
          )
        }
        </div>
        <div className='buttons'>
          <button style={{ backgroundColor: !canSwipe && '#c3c4d3' }} onClick={() => swipe('left')}>Swipe left!</button>
          <button style={{ backgroundColor: !canGoBack && '#c3c4d3' }} onClick={() => goBack()}>Undo swipe!</button>
          <button style={{ backgroundColor: !canSwipe && '#c3c4d3' }} onClick={() => swipe('right')}>Swipe right!</button>
        </div>
      </>
    )
}

export default SwipeCard