如何从 react.js 中的状态中删除部分数据

Question

我创建一些数据并将其添加到我的 selecetFile2 状态/然后我想通过任何事件删除该 selecetFile2 状态的某些部分 - 只是功能指南。

const [selectedFile2, setSelectedFile2] = useState([]); //my state for data
const [isFilePicked2, setIsFilePicked2] = useState(false); //just controll for page

此函数用于控制数据

    const changeHandler2 = (event) => {
       setSelectedFile2([...selectedFile2,event.target.files[0]]);
       setIsFilePicked(true);}

    const multi_img = ()=>{ //It's for input dialog box
        document.getElementById("multi_img").click();}

这是我的主要代码

     <input type="file" onChange={changeHandler2} title="ali ali"  id="multi_img" 
        name="img" accept="image/*"  style={{display:'none'}} />
        <div><BsFillPlusSquareFill onClick={multi_img} /> //input control by this
        {
            isFilePicked2 &&
                selectedFile2.map(item => <img key={v4()} src={URL.createObjectURL(item)} />)
          //this my Item I want to delete for example by click
          //I just need function
        }

Answer 1

给你

 <input
      type="file"
      onChange={changeHandler2}
      title="ali ali"
      id="multi_img"
      name="img"
      accept="image/*"
      style={{ display: "none" }}
    />
    <div>
      <BsFillPlusSquareFill onClick={multi_img} /> //input control by this
      {
        isFilePicked2 &&
          selectedFile2.map((item) => (
            <img key={v4()} src={URL.createObjectURL(item)} onClick={ () => {
              setSelectedFile2(selectedFile2.filter(i => i !== item))
            }} />
          ))
        //this my Item I want to delete for example by click
        //I just need function
      }
    </div>

Answer 2

通过使用useState，您不能直接更新或修改状态。每当您想修改或更新状态时，您都必须使用 set[nameofstate] 来完成。在你的情况下。每当您想更新 selectedFile2 时，都必须将 seletedFile2 的新值传递给 setSelectedFile2(newValueForSelectedFile2)。有关更多信息和示例，请访问 documenation

如何从 react.js 中的状态中删除部分数据

how can I remove part of data from state in react.js

input

reactjs