React Native - State 在按钮按下时无法正确更改（TouchableHighlight）

Question

在 touchableHighlight 组件上按下按钮后，我想更改 state。 问题是 state 不会立即更新，但在我按下另一个渲染组件后它会更新，并将前一个字母添加到 state。 这是代码：

export default function App() {

  const [word, setword] = useState('');
  const handleChange=(e) => {
    setword(word.concat(e.target.outerText));
  };

  return (
    <View style={styles.container}>
      <View style={styles.row}>
      {wordpuzzle.square[0].map((letter, index) => {
        return(
          <TouchableHighlight style={styles.touchableHighlight} key={index} onPress={handleChange}>
            <View style={styles.button}>
              <Text style={styles.text}>{letter}</Text>
            </View>
          </TouchableHighlight>
        )})
      } 

这是wordpuzzle.json文件，我从该文件中映射内容以呈现组件内部。

{
    "square": [
        ["P", "E", "R", "E"],
        ["I", "U", "B", "A"],
        ["T", "A", "B", "L"],
        ["E", "H", "C", "I"]
    ],
    "10": ["pubblicati"],
    "9": ["pubbliche", "pubblicai"],
    "8": ["pubblica"],
    "7": ["pubiche", "barbuta", "barbuti", "barbute"],
    "6": ["pubica", "rubati", "rubate"],
    "5": ["barbe", "beare"],
    "4": ["pere", "pera", "erba", "bali", "pube", "pubi", "bare",
        "taci", "aura", "aure", "ruba"
    ],
    "3": ["eta", "pia", "pie", "che", "ali", "bea"]
}

Answer 1

可能会尝试在基于之前的 state 设置 state 时使用之前的值

setword(prev => prev.concat(e.target.outerText));

Answer 2

请试一试！

setword([...word.concat(e.target.outerText)]);

字 state 是字符数组。 当你调用 setWord 时，会添加 word 内容但 word 变量地址本身不会改变，系统无法识别 state 发生变化，因此 UI 组件不会刷新。 基本上你应该用一个新数组调用 setWord 。