I'm having trouble learning how to get my React Hooks to update in real time

Below is my code. How do I get my potion count to update in real time while also avoiding the "More hooks than in previous render" error.

I know there is a way to do this, but I'm struggling to understand how it works. If someone could explain it well, that would be great because I will need this to happen alot in what I'm building.

import React, { useState } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import CustomButton from './CustomButton';
import { useFonts } from 'expo-font';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import player from './Player';
import usePotion from './UsePotion';
import { useNavigation } from '@react-navigation/native';
function addPotion() {
player.potions ++;
}
function BattleScreen() {
const [fontsLoaded, error] = useFonts({
'Valorax': require('./Fonts/Valorax.otf'),
});
const navigation = useNavigation()
const [potionMessage, setPotionMessage] = useState('');
if (!fontsLoaded) {
return <Text>Loading...</Text>;
}
return (
<View style={styles.container}>
<Text style={styles.text}>{player.potions}</Text>
{potionMessage && <Text style={styles.text}>{potionMessage}</Text>}
<View style={styles.topHalf}>
</View>
<View style={styles.bottomHalf}>
<View style={styles.buttonRow}>
<CustomButton onPress={() => handleAttack()} title='Attack'></CustomButton>
<CustomButton onPress={() => handleMagic()} title='Magic'></CustomButton>
</View>
<View style={styles.buttonRow}>
<CustomButton onPress={() => usePotion(setPotionMessage)} title='Use Potion'></CustomButton>
<CustomButton onPress={() => handleRun()} title='Run'></CustomButton>
<CustomButton onPress={() => navigation.navigate('Home')} title="Home"></CustomButton>
<CustomButton onPress={() => addPotion()} title="Add Potion"></CustomButton>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#000000',
},
topHalf: {
flex: 1,
color: 'white',
},
bottomHalf: {
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap'
},
buttonRow: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-evenly',
flexWrap: 'wrap'
},
text: {
fontSize: 40,
color: 'white',
fontFamily: "Valorax",
}
});
export default BattleScreen;

I think that the errors you are seeing is caused by calling the usePotion hook in your JSX. Hooks can only be called in the top level of other other hooks, or the top level of other components. I'm not sure what usePotion does with setPotionMessage, but it needs to be called at the top level of the component. If there's some event you want to be triggerable from usePotion you need to return it from usePotion:

// usePotion
export default function usePotion(onChange){
  // I assume usePotion would be structured like this
  const [potion,setPotion] = useState({
    hp:20,
    message:''
  })
  // im assuming usePotion have some internal data
  // that you would like to setPotionMessage to 
  const getPotionMessage = ()=>{
    // because you past setPotionMessage I assume that you
    // you want to subscribe to potion message changes?
    onChange?.(potion.message)
    return potion.message
  }
  return { potion,getPotionMessage}
}

Now you have a hook that returns some state about potions, and allows you trigger other state to update:

// top level of component
const {potion,getPotionMessage} = usePotion(setPotionMessage)
.
.
.

<CustomButton onPress={getPotionMessage} title='Use Potion'/>

Finally you need to get player into react lifecycle. You could either convert Player.js into a hook, or you could you could put player into state:

// at the top level of the component
const [playerState,setPlayerState] = useState(player);
//  maybe wrap addPotions in a useCallback?
const addPotion = ()=>{
  setPlayerState(prev=>{
    return {...prev,potions:prev.potions+1}
  })
}

</details>



# 答案2
**得分**: 0

为了解决药水计数不更新的问题，简单的答案是你需要使用 `useState` 钩子。这是因为 React 只会在状态改变时重新渲染，而且它足够智能，只会更新受到状态变化影响的组件。

在你的代码中的一个示例是当调用 `setPotionMessage` 方法并更新 `potionMessage` 值时，React 只会更新 JSX 中的 `{potionMessage && <Text style={styles.text}>{potionMessage}</Text>}` 部分。

为什么这些数据需要存储在状态中的长理由如下：
当 React 初始渲染时，它会编译所有返回组件的 DOM 树。这个 DOM 树将与你编写的 JSX 非常相似，只是有额外的父级标签和其他内容。只有当状态发生变化时，React 才会编译一个新的 DOM 树，称为“虚拟 DOM”，其中包含新变化的数据。然后，它将比较现有的 DOM 树和新的虚拟 DOM 树，以找出已更改的组件。最后，React 将更新原始 DOM 树，但它只会更新那些已更改的组件。

继续使用我上面提到的 `potionMessage` 示例。当 `BattleScreen` 初始渲染时，虚拟 DOM 将渲染类似于以下的 JSX（从 `return` 语句中提取）：
```jsx
    <View>
      <Text>3</Text>
      <View></View>
      ...
    </View>

然而，一旦调用 setPotionMessage 并且 potionMessage 值从 '' 更改为一条消息，React 会重新编译虚拟 DOM 以确定有哪些变化。它将重新编译为类似于以下内容：

    <View>
      <Text>3</Text>
      <View>
        <Text>You really need a potion!</Text>
      </View>
      ...
    </View>

然后，它将原始 DOM 树与虚拟 DOM 树进行比较，以找出不同之处。当找到不同之处时，它只会重新渲染实际 DOM 树中已更改的部分。

    <View>
      <Text>3</Text>
      <View>
      // 仅重新渲染 DOM 上的这个块
        <Text>You really need a potion!</Text>
     // ---
      </View>
      ...
    </View>

关于所需的代码修改，PhantomSpooks已经概述了所需的更改。正如他们提到的，将玩家引入 React 生命周期将是关键。

    <View>
<Text>3</Text>
<View></View>
...
</View>

    <View>
<Text>3</Text>
<View>
<Text>You really need a potion!</Text>
</View>
...
</View>

    <View>
<Text>3</Text>
<View>
// ONLY this block is rerendered on the DOM
<Text>You really need a potion!</Text>
// ---
</View>
...
</View>