javascript - 如何使用 JSX 从 .map() 将 .push() 选择的 ids 到数组(本地状态)

Question

所以有一个组件，我尝试一个一个地选择元素。 该元素是一个外部组件//

class AddItem extends React.Component {
       state = {
        selected: [],
       };

//这里我尝试了几种不同的方法将选定的 id 推送到本地状态如果我 concole.log(selectedId) 我得到正确的所需输出但是当推送时 state.selected 变为 1 如果我选择另一个它制动的元素。

  handleGroupSelection = selectedId => {
     let newList = this.state.selected;
     newList = newList.push(selectedId);
     this.setState({ selected: newList });
   };


 arrayContains = id => {
    for (let item in this.state.selected) {
      if (item.id === id) {
        return true;
      }
    }
      return false;
}



 render() {
    return (
      {this.props.getSelf &&
        this.props.getSelf.groups && (
          <Grid
             container
             item
             xs={12}
             sm={8}
             md={6}
             lg={4}
             spacing={16}
          >
            <Grid item xs={12} sm={12} md={12} lg={12}>
              <ListItemText primary="My Groups:" />
            </Grid>
              {this.props.getSelf.groups.map(listItem => (
                <Grid item xs={4} sm={4} md={4} lg={4}>
                  <div
             //here I would like to add a conditional style, based on selectedIds. 

                    className={
                      this.arrayContains(listItem.id) === true
                        ? classes.layer
                        : "none"
                    }
                    onClick={() => 
                     this.handleGroupSelection(listItem.id)}
                    >
                    <GroupListItem
                      groupId={listItem.id}
                      key={listItem.id}
                      anchor={listItem.id}
                      image={listItem.image}
                      name={listItem.name}
                      disable={true}
                     />
                   </div>
                </Grid>
             ))}
    )
 }

Answer 1

这很可能与调用 newList.push() 时仍在改变组件状态这一事实有关。看起来您只是在保存副本，但实际上您在做与 this.state.selected.push(selectedId)

相同的操作

尝试将逻辑重构为这样的东西

handleGroupSelection = (selectedId) => {
    this.setState((prevState) => {
      return{
          selected: [...prevState.selected, selectedId]
      }

  })
}

这将创建一个全新的组件状态，这是为 React 组件设置状态时的好习惯。