通過 useState 響應更新狀態數組

Question

我是 react/js 新手，需要幫助。 我有以下代碼：

import React, { useState, useEffect } from 'react'

function MainBoard() {

    let letter = ''

    const [lastLetter, setFirstLetter] = useState('')
    function onLastLetterChange(event) {
        const {id, name, type, value} = event.target
        letter = value;
        setFirstLetter((value) => value.slice(-1))
    }

  return (
    <div>
        <input id='5' className='game-area-five' type='text' onChange={onLastLetterChange} value={letter}/>
        <input id='4' className='game-area-four' type='text' maxLength='1' />
        <input id='3' className='game-area-three' type='text' maxLength='1' />
        <input id='2' className='game-area-two' type='text' maxLength='1' />
        <input id='1' className='game-area-one' type='text' maxLength='1' />
    </div>
  )
}

export default MainBoard

現在想象一下，我必須在 MainBoard() 返回五次之前完成所有交易......必須有一種方法可以用數組解決這個問題，對吧？ 第二件事，為什么在輸入 id 5 時，我無法在實際頁面上輸入任何內容？ 就像它被阻止了（只有當我在 html 輸入上有“值”屬性時才會發生這種情況）

非常感謝和解釋更多<3

編輯：我要做的是使用輸入 html 標記僅保存最后一個輸入（鍵 -> 一個字母），例如，如果您嘗試在輸入中鍵入“hello world”，它應該保存“d”和在輸入中僅顯示“d”。 希望它更清楚......我真的不知道如何解釋:(

Answer 1

我可能對你的 onLastLetterChange 有點迷茫，但我認為你不需要它，除非它是為了一些特別的東西。 這是一個關於如何循環遍歷數組以生成一堆輸入的想法。 想法是制作一個 InputComponent 然后循環它：

const InputComponent = ({id, class}) => {
  const [letter, setLetter] = useState("")
  const [lastLetter, setFirstLetter] = useState('')
  function onLastLetterChange(event) {
      const {id, name, type, value} = event.target
      setLetter(value);
      setFirstLetter((value) => value.slice(-1))
  }
  return <input id={id} className={`game-area-${class}`} type='text' onChange={onLastLetterChange} value={letter}/>
}

const NormalInput = ({id,class}) => {
  const [value, setValue] = useState("")
  return <input id={id} className={`game-area-${class}`} type='text' onChange={(e) => setValue(e.target.value)} value={value}/>
}

export default function App() {
  const arr = ["one","two","three","four","five"]
  
  return (
    <div className="App">
      {arr.map((value, index) => ( <InputComponent id={index} class={value} />))}
    </div>
  );
}

Answer 2

我不能用數組的代碼回答你的第一個問題，因為我不知道 lastLetter 應該做什么，但是是的，你需要一個對象數組來復制這個邏輯。

在 React 中，任何來自 useState 的變量都會導致組件重新渲染。 所以這里的letter不是 useState 變量，所以狀態實際上並沒有重新渲染。 變量發生了變化，但因為它不是 useState 變量，所以它不會重新渲染。 你想這樣做：

  const [letter, setLetter] = useState("");

這是一個工作示例：

https://codesandbox.io/s/example-forked-23nsts?file=/src/App.js:0-931