Arrays 删除后，UI将重新呈现并获取所有复选框

复选框和删除功能正常工作。。删除后，UI会重新呈现，我会再次获得所有复选框。。标记的复选框不应再次出现。请告诉我如何阻止这一切。单击“删除”按钮后，我不希望UI中出现复选框

    import React,{Component} from 'react';
    import './UserList.css';
    import jsonData from '../../people_(5).json';

    const list = jsonData.People

    const list2 = list.map(v => {
      return {
        ...v,
        value: false
      }
    })
    list2.forEach((obj,index)=>obj.id=index)


    class UserList extends Component{
        state={
            userList: list2
        };

      handleChange = e => {
        console.log(this.state.userList)

        const id = e.target.id;

        this.setState(prevState => {
          return {
            userList: prevState.userList.map(
              li => (li.id === +id ? {...li,
                value: !li.value
                } : li)

            )
          };
        });
      };
      handleClick = () => {
        console.log(this.state.userList)

        this.setState(prevState => {
          return {
            userList: prevState.userList.filter(li => !li.value)
          };
        });
      };
    render(){
        return(
                <form className="pa4">
                  <fieldset id="people" className="del bn">
                    <legend className="fw7 mb2">People<button onClick={this.handleClick}>Delete</button></legend>
                    {this.state.userList.map(e => (
                          <div key={e.id}>
                            <input
                              type="checkbox"
                              id={e.id}
                              checked={e.value}
                              onChange={this.handleChange}
                            />
                            <label htmlFor={e.name}>{e.name}</label>
                          </div>
                        ))}

                   </fieldset>
                </form>


                );
        }
    }

    export default UserList

import React，{Component}来自'React'；
导入“./UserList.css”；
从“../../people_u5.json”导入jsonData；
const list=jsonData.People
const list2=list.map（v=>{
返回{
v
值：false
}
})
列表2.forEach（（对象，索引）=>obj.id=index）
类UserList扩展组件{
陈述={
用户列表：列表2
};
handleChange=e=>{
console.log（this.state.userList）
const id=e.target.id；
this.setState（prevState=>{
返回{
userList:prevState.userList.map(
li=>（li.id==+id？{……li，
值：！li.value
}：li）
)
};
});
};
handleClick=（）=>{
console.log（this.state.userList）
this.setState（prevState=>{
返回{
userList:prevState.userList.filter（li=>！li.value）
};
});
};
render（）{
返回(
人民删除
{this.state.userList.map（e=>(
{e.name}
))}
);
}
}
导出默认用户列表

您没有在正确的位置更新正确的值。请检查下面代码中的逻辑。您有未控制的复选框，并且您正在从prevState更改当前状态，而不是按复选框状态筛选数据

handleClick = () => {
    console.log(this.state.userList)
    this.setState(prevState => {
      return {
        userList: prevState.userList.filter(li => !li.value)
      };
    });
  };

---

我认为您放置按钮的位置不正确。每次单击表单元素内的按钮都会导致页面重新呈现，也许您可以这样更改按钮位置

<div>
   <form className="pa4">
      <fieldset id="people" className="del bn">
       ...
      </fieldset>   
   </form>
   <button onClick={this.handleClick}>delete</button>
</div>

...
删去

---

重新呈现页面后，用户将被设置为初始值，因此handleChange实际上不起作用，那么您就不能删除相应的输入元素。

您能建议任何控制方法吗？我不想重新渲染page@Rennie通过dom方法获取所有复选框，并创建一个新数组，将需要的元素推送到数组中，并设置目前可以实现此目的的状态