如何在 json 文件中移动.#React

Question

我想知道如何在json文件中前后移动，请参阅此图。

https://i.stack.imgur.com/n7BqT.png（对不起，我不能发布img ：/）我希望当下面的箭头可以在json文件中移动时。就像

{
      "id": 1,
      "word": "Silla",
      "engword": "Chair",
      "deuword": "Stuhl"
 },
{
      "id": 2,
      "word": "Algo",
      "engword": "Something",
      "deuword": "Etwas"
 },

这就是我向每个组件发送我的话的方式。

 function App() {
   return (
     <div>
       <div id="container">
         <div id="spanish">
           <Spanish word={words.words[0].word} />
         </div>
         <div id="app">
           <div id="english">
             <English word={words.words[0].engword} />
           </div>
           <div id="deutsch">
             <Deutsch word={words.words[0].deuword} />
           </div>
         </div>
       </div>
       <div id="controls">
         <Previous />
         <Next />
       </div>
     </div>
   );
 }

我想在单击下一个箭头时做到这一点，我发送到英语组件类似的东西

<English word={words.words[actualword+1].engword} />

Answer 1

将应用程序从函数组件更改为类组件

使用步骤创建初始状态

this.state = { step: 0 }

将设置状态函数传递给下一个和上一个组件

 <Previous onClick={() => setState({ step: step - 1 })} />
 <Next onClick={() => setState({ step: step + 1 })} />

应该看起来像这样

import React, { Component } from 'react'
import './App.css'
class App extends Component {
  constructor (props) {
    super(props)
    this.state = { step: 0 }
  }
  render () {
    const { step } = this.state
    return (
      <div>
        <div id='container'>
          <div id='spanish'>
            <Spanish word={words.words[step].word} />
          </div>
          <div id='app'>
            <div id='english'>
              <English word={words.words[step].engword} />
            </div>
            <div id='deutsch'>
              <Deutsch word={words.words[step].deuword} />
            </div>
          </div>
        </div>
        <div id='controls'>
          <Previous onClick={() => setState({ step: step - 1 })} />
          <Next onClick={() => setState({ step: step + 1 })} />
        </div>
      </div>
    )
  }
}

添加步长的默认最小值和最大值并从步骤<0和数组边界进行检查

Answer 2

使其成为具有状态的高阶组件

<Spanish word={this.state.word} />

并使用箭头更改状态单击