axios 请求多选无法将更新形式中的值更改为 PUT 方法；反应.js

Posted 2023-02-22

【中文标题】axios 请求多选无法将更新形式中的值更改为 PUT 方法；反应.js

【英文标题】：Axios request multiselect unable value to change in update form as PUT Method; React.js

【发布时间】：2021-10-11 19:44:30

【问题描述】：

这是一种更新形式，它具有多选选择，但可以将存储的数据更改为选择和取消选择。

代码。

import React,  useState, useEffect from 'react';
import Select from 'react-select'
import 
    CPagination,
    CCard,
    CCardBody,
    CCardHeader,
    CCol,
    CDataTable,
    CRow,
    CNavbarNav,
    CForm,
    CInput, CNavbar,
    CButton, CContainer, CFormGroup, CCardFooter, CLabel, CSelect
 from '@coreui/react';
import CIcon from '@coreui/icons-react'
import useCookies from 'react-cookie';
import API_SERVICE from 'src/views/API/API_Service';

function Form(records) 
    const [name, setName]  = useState('
    const [newspaper_of, setNewspaper_of] = useState('')
    const [items, setItems] = useState([]);
    const [token] = useCookies(['mytoken'])

    useEffect(() => 
        setName(records.list.name)
        setNewspaper_of(records.list.newspaper_of)
    , [])
   
// send to update data PUT method ...
    const Update_list = () =>
        API_SERVICE.updateforCustomer(records.list.id, name,newspaper_of,token['mytoken'])
            .then(res => records.updateinfor(res))
            .catch(error => console.log(error))
    
    
    //   for get data to select dropdown
    
    useEffect(() => 
        async function getCharacters() 
          const response = await fetch("http://127.0.0.1:8000/api/Newspaper/",
            'method': 'GET',
            headers: 
                'Content-Type' : 'application/json',
                'Authorization' : 'Token afd6dc50d52e47f5dfc29b5d9e027660e400196c',
            
          );
          const body = await response.json();
        setItems(body.map(( newspaper,id ) => ( label: newspaper, value: id )));
        
       
       getCharacters();
       
      , []);
   
   

    function handleChange(event)
        setNewspaper_of(event)
    

    return (
        <div>
           
            records.list ? (

                <div>
                    <CCol xs="12">
                        <CCard>
                            <CCardHeader>
                                <h4><strong> ALTER FORM </strong></h4>
                                /* <small> Form</small> */
                            </CCardHeader>
                    <CCardBody>
                    <CFormGroup row>
                        <CCol xs="4">
                    <CLabel htmlFor="company">Newspaper</CLabel>
                    This is have for multi select /* <CSelect custom name="ccyear" value=newspaper_of id='language' onChange=e => setNewspaper_of(e.target.value)   onChange=e => setNewspaper_of(e.target.value)  custom isMulti>  setNewspaper_of(console.log(e,"E"),e.target.value)  */
                    
                    <Select custom name="ccyear" value=newspaper_of id='language'   onChange=handleChange  isMulti/>
                    items.map(( label, value ) => (<option key=value value=value  >label</option>)) 
                  </Select>

                     /*==============================================================================================================  */
                    <CInput id="company" name="name" value=name onChange=e => setName(e.target.value) placeholder="Enter Newspaper" />

                   

                    
                       </CCol>
                    </CFormGroup>
                    <br></br>
                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    records.list.id ? <CButton type="submit" size="sm" color="primary" onClick=Update_list>Update</CButton> : <CButton type="submit" size="sm" color="primary" >Add new</CButton>
                    </CCardBody>
                    </CCard></CCol>

                </div>
            ) : null
        </div>
    )


export default Form

更新表格；存储数据无法更改取消选择并在多选中引发选择错误；我想多选是动态选项，并从 axios 请求获取数据，因为选项必须 select 数据项以及 deselect 必须通过更新；对于整改，请给予支持； 谢谢。

【参考方案1】：

<Select custom name="ccyear" value= items.filter( i => newspaper_of.some( n => n === i.value ) ) onChange=(v) => setNewspaper_of(( v || [] ).map( v => v.value) ) isMulti options= items />

多选 PUT 工作正常