这是100%的我只是误解了Reaction-Native中的状态是如何工作的,我希望得到一个有启发性的更正.

我已经宣布我的状态:

const [players, setPlayers] = useState(["",""]);

因此,默认情况下有两名球员,两人都没有名字.到目前一切尚好.

在我的render()中,这是我输出文本输入的地方:

{ players.map( (player, index) =>
  <TextInput key={index} type="text" style={styles.playerEntry} name={"player-"+index} value={players[index].name} onBlur={event => changePlayerName(index, event, players)} placeholderTextColor={color.greyPlaceholder} placeholder={appText.player[language] + (index+1)} />
) }

这可以很好地工作,并使用正确的占位符绘制两个文本输入.

我的changePlayerName脚本也能正常工作,我已经在它上面放置了控制台日志(log),以确保:

This is me changing player 0's name to Michael
players :  (2) ['Michael', '']
This is me changing player 1's name to David
players :  (2) ['Michael', 'David']

到目前一切尚好.现在我想添加一个新的输入.请原谅控制台日志(log).我是一条老把戏的老狗.

const addPlayer = () => {
  let playerState = players;
  if (players.length <= 4) {
    playerState.push("");
    console.log("pushed");
  }
  setPlayers(playerState);
  savePlayers(playerState);
  console.log('addPlayer playerState : ', playerState);
  console.log('players : ', players);
}

当我从添加播放器按钮运行此功能时,我在控制台中得到了一个可爱的Play by Play:

players :  (2) ['Michael', 'David']
pushed
addPlayer playerState :  (3) ['Michael', 'David', '']
players :  (3) ['Michael', 'David', '']
pushed
addPlayer playerState :  (4) ['Michael', 'David', '', '']
players :  (4) ['Michael', 'David', '', '']
pushed
addPlayer playerState :  (5) ['Michael', 'David', '', '', '']
players :  (5) ['Michael', 'David', '', '', '']

所以我已经将玩家的状态更改为5项array.

遗憾的是,根本没有添加新的文本输入.更新的状态从未反映在array.map循环中.

我试着让它成为一个组件,并传递给它props ,但这似乎并没有改变结果.如果是这样做,请让我知道,我会张贴代码.

我一直在倾诉RN文档,但我担心我不太明白应该如何在RN应用程序中使用任何动态数据:|

推荐答案

将新元素添加到数组时,使用spread语法而不是push.将处于状态的数组视为只读,因此将新数组传递给更新状态.

setPlayers([...playerState, ""]);

有关详细信息,请参阅Updating Arrays in State.

React-native相关问答推荐

嵌套的FlatList内的Incorrect Padding

'未能找到 React 根视图的片段' React Native Android RNScreens

使用 React-Native 将 content:// URI 转换为 Android 的实际路径

react native 中 componentDidMount 和 componentDidUpdate 有什么区别

图像背景ResizeMode调整大小模式

使用 create-react-native-app 创建了一个应用程序,如何将其发布到 Google Play store ?

eslint Parsing error: Unexpected token =

元素中缺少main.jsbundle、Foundation和Security,导致报错

使用 React Navigation 制作离开屏幕的动画

react native图像不适用于特定 URL

如何使 React Native Animated.View 可点击?

背景图像在react中不起作用

ScrollView visible Scroll Bar

如何将 Leaflet.js 与 react-native 一起使用

React Native TextInput blur TouchableHighlight 按下事件

将 React Native 升级到 0.60-RC2 后找不到库libjsc.so

如何在本地构建 Expo APK

如何用 Realm 元素文件组织 React Native?

I18nManager.forceRTL 不会在首次应用加载时应用更改

React native - 以编程方式判断是否启用了远程 JS 调试