如何自动更新js .map中的属性

Question

我有一个呈现某些按钮的映射数组。然后一个后退和下一个按钮（地图外）。当我点击下一页时，我希望它更新URL路由。它会更改组件并显示屏幕上的下一个按钮，但不会更改URL路由。我猜Navigator内部 - 我需要'to'属性来更新点击下一个/后退按钮时。任何建议从哪里开始呢？

const debug = require("debug")("components:Letterindex") 
const React = require("react") 
const { connect } = require("react-redux") 
const request = require("superagent") 
const { Link, Redirect } = require("react-router") 

const NavLink = require("./NavLink.js") 

class Letterindex extends React.Component { 

    constructor(){ 
    super() 
    this.nextButton = this.nextButton.bind(this) 
    this.previousButton = this.previousButton.bind(this) 
    } 

    handleClick(e) { 
    e.preventDefault() 
    } 

    nextButton(letter,letters,dispatch){ 
    const id = letters.findIndex(item =>{ 
     return item.id ===letter.id 
    }) 
    if(id === (letters.length -1)){ 
     dispatch({ 
     type: "RENDER_LETTER", 
     payload: letters[0], 
     }) 
    } 
    else { 
     return (
     dispatch({ 
      type: "RENDER_LETTER", 
      payload: letters[id+1], 
     }) 
    ) 
    } 
    } 

    previousButton(letter,letters,dispatch){ 
    const id = letters.findIndex(item =>{ 
     return item.id ===letter.id 
    }) 
    if(id === 0){ 
     dispatch({ 
     type: "RENDER_LETTER", 
     payload: letters[letters.length-1], 
     }) 
    } 
    else { 
     return (
     dispatch({ 
      type: "RENDER_LETTER", 
      payload: letters[id-1], 
     }) 
     ) 
    } 
    } 

    render() { 
debug(this.props) 
const { dispatch, letters, letter } = this.props 
return (
    <div className="row"> 
    <div className="col-sm-12"> 

     <img id="back" src="../../images/back.gif" alt="back button" 
     onClick={()=> 
     this.previousButton(letter, letters, dispatch)} 
     /> 
    { 
     letters.map((letter) => { 

     return (
      <NavLink 
      key={letter.id} 
      to={`/letterindex/${letter.capital}`} 
      activeClassName="active"> 
      <div 
       className="btn-group btn-group-lg btn-group-center wiggle-me" 
       role="group" 
       aria-label="..."> 

       <button 
       type="button" 
       className="btn" 
       onClick={() => 
        dispatch({ 
         type: "RENDER_LETTER", 
         payload: letter, 
        }) 
       }> 
       {letter.capital} 
       </button> 
      </div> 
      </NavLink> 
     ) 
     }) 
    } 

    <img id="next" src="../../images/next.gif" alt="next button" 
     onClick={()=> 
     this.nextButton(letter, letters, dispatch)} 
    /> 
    {this.props.children} 

    </div> 
    </div> 
    ) 
    } 
} 

module.exports = connect(state => state)(Letterindex) 

Answer 1

增加了一个路由器推到调度中的每个字母功能：

this.props.router.push(`/letterindex/${letters[0].capital}`) 

完整代码这里的按钮：

nextButton(letter,letters,dispatch){ 
const id = letters.findIndex(item =>{ 
    return item.id ===letter.id 
}) 
if(id === (letters.length -1)){ 
    this.props.router.push(`/letterindex/${letters[0].capital}`) 
    dispatch({ 
    type: "RENDER_LETTER", 
    payload: letters[0], 
    }) 
} 
else { 
    this.props.router.push(`/letterindex/${letters[id+1].capital}`) 
    dispatch({ 
     type: "RENDER_LETTER", 
     payload: letters[id+1], 
    }) 
} 

}