通过 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