Typescript 从React Native functional component和useState中的数组映射函数动态渲染内容

我有一个功能组件来呈现一个带有一些输入元素的简单表单

我希望能够在用户单击按钮时动态添加输入元素。 我使用useState钩子创建了一个onChange arrow func，如下所示：

  const [players, setPlayers] = useState<PlayerModel[]>([
    { id: 0, firstName: "", lastName: "" },
  ]);

  const handleOnAddPlayerPress = () => {
    let newPlayers = players;
    newPlayers.push({ id: newPlayers[newPlayers.length - 1].id + 1, firstName: "", lastName: "" });
    setPlayers(newPlayers);
  } 

{players.map((player, index) => {
      return <Input key={index} label={`Player #${player.id}`} />;
    })}

<Button
  onPress={handleOnAddPlayerPress}
  type="clear"
  icon={
    <Icon
      raised={true}
      name="user-plus"
      underlayColor="black"
      type="font-awesome"
      reverse
    />
  }
></Button>

const[players，setPlayers]=useState([
{id:0，姓氏：，姓氏：}，
]);
const handleOnAddPlayerPress=（）=>{
让新玩家=玩家；
newPlayers.push（{id:newPlayers[newPlayers.length-1].id+1，firstName:，lastName:：}）；
赛特球员（新球员）；
} 

我使用数组映射函数渲染玩家，如下所示：

  const [players, setPlayers] = useState<PlayerModel[]>([
    { id: 0, firstName: "", lastName: "" },
  ]);

  const handleOnAddPlayerPress = () => {
    let newPlayers = players;
    newPlayers.push({ id: newPlayers[newPlayers.length - 1].id + 1, firstName: "", lastName: "" });
    setPlayers(newPlayers);
  } 

{players.map((player, index) => {
      return <Input key={index} label={`Player #${player.id}`} />;
    })}

<Button
  onPress={handleOnAddPlayerPress}
  type="clear"
  icon={
    <Icon
      raised={true}
      name="user-plus"
      underlayColor="black"
      type="font-awesome"
      reverse
    />
  }
></Button>

{players.map（（player，index）=>{
返回；
})}

当用户单击按钮时，我调用onChange函数，如下所示：

  const [players, setPlayers] = useState<PlayerModel[]>([
    { id: 0, firstName: "", lastName: "" },
  ]);

  const handleOnAddPlayerPress = () => {
    let newPlayers = players;
    newPlayers.push({ id: newPlayers[newPlayers.length - 1].id + 1, firstName: "", lastName: "" });
    setPlayers(newPlayers);
  } 

{players.map((player, index) => {
      return <Input key={index} label={`Player #${player.id}`} />;
    })}

<Button
  onPress={handleOnAddPlayerPress}
  type="clear"
  icon={
    <Icon
      raised={true}
      name="user-plus"
      underlayColor="black"
      type="font-awesome"
      reverse
    />
  }
></Button>

总而言之：

import React, { useState } from "react";
import { ScrollView } from 'react-native';
import { Overlay, Input, Button, Icon } from "react-native-elements";
import { PlayerModel } from "../../models/PlayerModel";

export namespace AddNewTournamentForm {
  export interface Props {
    isVisible: boolean;
    onBackdropPress: () => void;
  }
}

export const AddNewTournamentForm = (
  props: AddNewTournamentForm.Props
): JSX.Element => {
  const [players, setPlayers] = useState<PlayerModel[]>([
    { id: 0, firstName: "", lastName: "" },
  ]);

  const handleOnAddPlayerPress = () => {
    let newPlayers = players;
    newPlayers.push({ id: newPlayers[newPlayers.length - 1].id + 1, firstName: "", lastName: "" });
    setPlayers(newPlayers);
  } 



  return (
    <Overlay {...props} fullScreen>
      <ScrollView>
        ...
        {players.map((player, index) => {
          return <Input key={index} label={`Player #${player.id}`} />;
        })}
        <Button
          onPress={handleOnAddPlayerPress}
          type="clear"
          icon={
            <Icon
              raised={true}
              name="user-plus"
              underlayColor="black"
              type="font-awesome"
              reverse
            />
          }
        ></Button>
        ...
      </ScrollView>
    </Overlay>
  );
};

import React，{useState}来自“React”；
从“react native”导入{ScrollView}；
从“react native elements”导入{Overlay，Input，Button，Icon}；
从“../../models/PlayerModel”导入{PlayerModel}”；
导出命名空间AddNewTournamentForm{
导出接口道具{
isVisible：布尔；
onBackdropPress:（）=>void；
}
}
导出常量AddNewTournamentForm=(
道具：AddNewTournamentForm.props
)：JSX.Element=>{
const[players，setPlayers]=useState([
{id:0，姓氏：，姓氏：}，
]);
const handleOnAddPlayerPress=（）=>{
让新玩家=玩家；
newPlayers.push（{id:newPlayers[newPlayers.length-1].id+1，firstName:，lastName:：}）；
赛特球员（新球员）；
} 
返回(
...
{players.map（（player，index）=>{
返回；
})}
...
);
};

但是，当发生更改时，布局似乎不会重新呈现自身。 另一件奇怪的事情是，当我离开这个覆盖并返回时，我才看到根据玩家数量更新的输入元素的数量（这很奇怪，因为如果我进出覆盖，状态应该被启动）

有什么建议吗？：）

这样试试

const handleOnAddPlayerPress = () => {
    const newPlayers = [...players]; <-- Do this -->
    newPlayers.push({ id: newPlayers[newPlayers.length - 1].id + 1, firstName: "", lastName: "" });
    setPlayers(newPlayers);
}

const handleOnAddPlayerPress=（）=>{
const newPlayers=[…players]；
newPlayers.push（{id:newPlayers[newPlayers.length-1].id+1，firstName:，lastName:：}）；
赛特球员（新球员）；
}

谢谢。现在它会动态渲染。我想知道为什么？也许你可以解释：）。但是，当我过度地走出这一步，又回到这一步时，这种状态并不会自行复位。我预计球员的数量将再次达到1人。我来自react.js世界。也许它在react native中有点不同？它只在引用更改时反映视图上的更改，所以这样做[…玩家]也会更改它的引用，所以它起作用：-）如果有帮助，请投票谢谢：-）