如何在 React 中向動態表添加多個值？

Question

我有一個表，可以從兩個選擇中收集用戶輸入。 當用戶選擇一個字段時，我已經成功地讓他們的輸入顯示在表格行上，並且任何新輸入都會觸發新行。

但是，我很難讓它顯示多個值而不是一個值。 這是它目前的樣子：

在它說輸入示例“P2P2”的地方，它應該只說“P2”； 每次添加新行時，都會成功添加“P2”，但它總是相互疊加，不像這樣的“Amazon”輸入：

我知道我做錯了什么並嘗試了多種方法，但我實際上不知道問題是什么或如何解決問題。 這是代碼：

 
  const [shop, setShop] = useState([]);
  
  const [profil, setProfil] = useState([]);

  const [formShop, setFormShop] = useState(undefined);
  
  const [formProfil, setFormProfil] = useState(undefined);
  
  function addShop(s){
    setShop((currentShops) => [...currentShops, s]);
  }

  
  function addProfile(p){
    setProfil((currentProfiles) => [...currentProfiles, p]);
  }

  function handleSubmit(e){
    e.preventDefault();

    addShop(formShop);
    addProfile(formProfil);

  }

        ......

                    <tr>
                      {(shop.map((s) => (
                        <tr>
                        <td>{s}</td>
                        <td>{profil}</td>
                        </tr>
                      )))}
                    </tr>
                    
                    ........
                    //snippets of form select

                    <Input type="select" name="selectStore" id="selectStore" onChange={(e) => setFormShop(e.target.value)}>

                    ........

                    <Input type="select" name="selectProf" id="selectProf" onChange={(e) => setFormProfil(e.target.value)}>

                    ........

Answer 1

我建議您使用 object 來維護配對商店的個人資料，這是一個有效的示例。

 const {useState} = React; const { Modal, ModalHeader, ModalBody, ModalFooter, Input, FormGroup, FormText, Form, Label, Button, Card, CardHeader, CardBody, CardTitle, //CardFooter, Table, Row, ButtonGroup, Col, } = Reactstrap; const App = (props) => { const [shopProfil, setShopProfil] = useState([]); const [formShop, setFormShop] = useState(undefined); const [formProfil, setFormProfil] = useState(undefined); console.log(formShop,formProfil) function addShopProfil(obj) { setShopProfil((currentShopProfiles) => { const curr = currentShopProfiles.slice() curr.push(obj); return curr }) } function handleSubmit(e) { e.preventDefault(); const objshopProfil ={ formshop:formShop, formprofil:formProfil }; addShopProfil(objshopProfil); } return ( <div> <div> <Table> <tbody> <tr> {shopProfil.map((s,index) => ( <tr key={`${s.formshop+s.formprofil+index}`}> <td>{s.formshop}</td> <td>{s.formprofil}</td> </tr> ))} </tr> </tbody> </Table> </div> <Form onSubmit={handleSubmit}> <FormGroup> <Label for="selectStore">Store</Label> <Input type="select" name="selectStore" id="selectStore" onChange={(e) => setFormShop(e.target.value)} > <option>-</option> <option>Amazon </option> <option>Local</option> <option>Target</option> </Input> </FormGroup> <FormGroup> <Label for="selectProf">Profile</Label> <Input type="select" name="selectProf" id="selectProf" onChange={(e) => setFormProfil(e.target.value)} > <option>-</option> <option>P1</option> <option>P2</option> <option>P3</option> <option>P4</option> </Input> </FormGroup> <button type="submit">button</button> </Form> </div> ); }; ReactDOM.render( <App />, document.getElementById('app') );

 <script src="https://npmcdn.com/react@15/dist/react-with-addons.js"></script> <script src="https://npmcdn.com/reactstrap@3/dist/reactstrap.min.js"></script> <link href="https://npmcdn.com/bootstrap@4.0.0-alpha.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="app"></div>

或者，如果您想保持相同的結構，請看這里：

 const {useState} = React; const { Modal, ModalHeader, ModalBody, ModalFooter, Input, FormGroup, FormText, Form, Label, Button, Card, CardHeader, CardBody, CardTitle, //CardFooter, Table, Row, ButtonGroup, Col, } = Reactstrap; const App = (props) => { const [shop, setShop] = useState([]); const [profil, setProfil] = useState([]); const [formShop, setFormShop] = useState(undefined); const [formProfil, setFormProfil] = useState(undefined); function addShop(s) { setShop((currentShops) => [...currentShops, s]); } function addProfile(p) { setProfil((currentProfiles) => [...currentProfiles, p]); } function handleSubmit(e) { e.preventDefault(); addShop(formShop); addProfile(formProfil); } return ( <div> <div> <Table> <tbody> <tr> {shop.map((s,i) => ( <tr key={`${s+i}`}> <td>{s}</td> <td>{profil[i]}</td> </tr> ))} </tr> </tbody> </Table> </div> <Form onSubmit={handleSubmit}> <FormGroup> <Label for="selectStore">Store</Label> <Input type="select" name="selectStore" id="selectStore" onChange={(e) => setFormShop(e.target.value)} > <option>-</option> <option>Amazon </option> <option>Local</option> <option>Target</option> </Input> </FormGroup> <FormGroup> <Label for="selectProf">Profile</Label> <Input type="select" name="selectProf" id="selectProf" onChange={(e) => setFormProfil(e.target.value)} > <option>-</option> <option>P1</option> <option>P2</option> <option>P3</option> <option>P4</option> </Input> </FormGroup> <button type="submit">button</button> </Form> </div> ); }; ReactDOM.render( <App />, document.getElementById('app') );

 <script src="https://npmcdn.com/react@15/dist/react-with-addons.js"></script> <script src="https://npmcdn.com/reactstrap@3/dist/reactstrap.min.js"></script> <link href="https://npmcdn.com/bootstrap@4.0.0-alpha.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="app"></div>