组件重复，三倍，四倍onClick React

Question

我有一个允许用户创建频道/聊天室进行通话的应用程序>

我创建了一些逻辑，以便当用户按下按钮时，他们创建频道，功能：onCreateChannel。

此功能将createChannel状态更改为true，然后显示存储在showChannelInput中的代码。这是我想要的行为，以便用户可以输入其频道名称并为其分配类别。

[当用户随后填写输入并选择类别时，这很好，我想要的行为有效，但是，当用户在第二，第三和第四次单击Create Channel按钮时，请尝试复制showChannelInput代码，每次三至四倍。

[我希望用户每次单击Create Channel按钮时每次只显示一次showChannelInput代码...。有人能看到为什么会这样吗？我说得通吗？

下面的代码：

export default function Channels() {
  const { currentUser, venue, venueUpdateHandler } = useContext(AuthContext);

[...]
  const channelData = setupChannels(venue !== null ? venue.chatRooms : []); //venue is coming from auth context and has the chatrooms in it as an object key

  const [channelName, setChannelName] = useState('');

  const [channels, setChannels] = useState(channelData);

  const [createChannel, setCreateChannel] = useState(false);

  const onFormControlChange = (event, key) => {
    if (event.target.value.length <= 100) {
      if (channels[key]) {
        let existingChannels = [...channels];
        existingChannels[key].name = event.target.value;
        setChannels(existingChannels);
      } else {
        setChannelName(event.target.value); // add new channel
      }
    }
  };

[...]

  const onAddChannelKeyPress = event => {
    if (event.key === 'Enter') {
      event.preventDefault();
      onAddChannelClick();
    }
  };

  const onCreateChannel = () => {
    setCreateChannel(true);
  };

  const onAddChannelClick  = () => {
    if (channelName === '') {
      return;
    }

    let existingChannels = [...channels];
    let newChannel = {
      key: existingChannels.length,
      name: channelName,
      deletable: true,
      markedForDelete: false,
      category: null
    };
    existingChannels.push(newChannel);
    setChannels(existingChannels);
    setChannelName('');
    setCreateChannel(false);
 };


  [...]




  let displayExistingChannels =  null;
  if (channels !== null){
   displayExistingChannels = (
      channels.map(channel => {
        return (
          <Grid key={channel.key} item style={styles.gridItem} justify="space-between">
            <ChannelListItem
              channel={channel}
              isSaving={isSaving}
              onDeleteChannelClick={onDeleteChannelClick}
              key={channel.key}
              onFormControlChange={onFormControlChange}
              onUndoChannelClick={onUndoChannelClick}
            />
          </Grid>
        )
      })
    )
  }


  let showChannelInput = null;
  if (createChannel) {
    showChannelInput = (
      channels.map(channel => {
        return (
          <Grid key={channel.key} item style={styles.gridItem} justify="space-between">
            <Grid item style={styles.gridItem}>
              <ChannelFormControl
                channelName={channelName}
                isSaving={isSaving}
                onFormControlChange={onFormControlChange}
                onAddChannelClick={onAddChannelClick} 
                onAddChannelKeyPress={onAddChannelKeyPress}
              />
            </Grid>
            <Grid>
              <ChannelCategory
                visible={true}
                onChange={value => onAddCategory(value, channel.key)}
                title="Add your channel to a category so that users can find it with ease"
                selected={channel.category}
                name={channel.key} // unique for every channel
              />
            </Grid>
          </Grid>
        )
      })
    )
  }

  return (
    <form noValidate autoComplete='off' onSubmit={onSubmit}>
      <Card style={styles.card}>
        <ActionResult result={actionResult} onClose={onActionResultClose} />
        <CardContent>
          <Box padding={3}>
            <FormLegend title={`${formTitle} (${channels.length})`} description={formDescription} />

            <Box marginTop={3} width='50%'>
              <Grid container direction='column' justify='flex-start' alignItems='stretch' spacing={1}>
                <ActionButton
                  labelNormal='Create Channel'
                  labelAction='Creating Channel'
                  onClickHandler={onCreateChannel}
                />
                  {displayExistingChannels}
                  {showChannelInput}
                <Grid item>
                  <ActionButton
                    isSaving={isSaving}
                    labelNormal='Save'
                    labelAction='Saving'
                    onClickHandler={onClickSave} 
                  />
                  <Button variant='text' color='secondary' style={styles.resetButton} onClick={onResetClick}>
                    Reset
                  </Button>
                </Grid>
              </Grid>
            </Box>
          </Box>
        </CardContent>
      </Card>
      [...]
    </form>
  );
}

我有一个允许用户创建聊天室/聊天室的应用程序，我已经创建了一些逻辑，因此当用户按下按钮时，他们会创建一个通道，功能是：onCreateChannel。这个...

Answer 1

发生这种情况是因为您正在使用channels.map，并且每次触发onAddChannelClick时，它都会将一个新通道推送到channels。因此，您应该创建一个新变量，而不是channels.map中的showChannelInput，它将像这样从channels获取最新的频道：