मैं एक ऐप बनाने की कोशिश कर रहा हूं जो ऑन चेंज हैंडलर के साथ फॉर्म चयन इनपुट के आधार पर सेटस्टेट करेगा। मेरा राज्य वस्तुओं की एक सरणी है, और मेरा फॉर्म विभिन्न प्रकार की विशेषताओं को सेट करने के लिए वस्तुओं की एक और सरणी के माध्यम से मैपिंग द्वारा बनाए जा रहे इनपुट का चयन करता है, जिसका उपयोग मैं यह निर्धारित करने के लिए करूंगा कि राज्य की सरणी में कहां और क्या विभाजित है।

किसी कारण से, मेरा कोड पहले मैप किए गए फॉर्म के साथ काम करता है, लेकिन अन्य सभी पर विफल रहता है। यहाँ मेरा कोड है:

import React, { Component } from 'react'
import { draft_teams } from '../utils/draftinputs';
import { getPlayers } from '../actions/playerActions';
import { saveDraftboard } from '../actions/draftActions';
import { connect } from 'react-redux';
import { 
    Form,
    Col,
    Button,
    } from 'react-bootstrap';
import PropTypes from 'prop-types';
import update from 'immutability-helper';

class DraftForm extends Component {

state = {
        draftboard: [
            {
                1: {team:'', player: ''}
            },
            {
                2: {team:'', player: ''}
            },
            {
                3: {team:'', player: ''}
            },
            {
                4: {team:'', player: ''}
            }
       ]
}

onChange = (e) => {
        e.persist();
        const pickName = e.target.name
        const pickValue = e.target.value
        const pickObjectName = e.target.getAttribute('label')
        this.setState((prevState) => update(prevState, { draftboard: [{ [pickObjectName]: 
        {[pickName]: {$set: pickValue}}}]} ))            
     }

render() {

        const { players } = this.props.player;

        return (
            <div className='mt-5'>
                <h5 className='mb-3 text-center'>Set Draft Board</h5>
                <Form onSubmit={this.onSubmit}>
                    {draft_teams.map(( { pick, name, player }) => (
                        <Form.Row>
                        <Form.Group as={Col} sm={.5} controlId="formGridPosition">
                            <Form.Label>Pick #</Form.Label>
                                <Form.Control   
                                defaultValue={pick}
                                className='mb-2'
                                size='sm'
                                name='pick'
                                label={pick}
                                as="select" >
                                <option>{pick}</option>
                                </Form.Control>
                            </Form.Group>

                            <Form.Group as={Col} controlId="formGridPosition">
                            <Form.Label>Team</Form.Label>
                                <Form.Control   
                                onChange={this.onChange}
                                defaultValue={name}
                                label={pick}
                                size='sm'
                                className='mb-2'
                                name='team'
                                as="select">
                               {draft_teams.map(({ name }) => (
                                   <option>{name}</option> 
                               ))}   
                            </Form.Control>
                            </Form.Group>

                            <Form.Group as={Col} controlId="formGridPosition">
                            <Form.Label>Player - Consensus Pick {pick} - {player}</Form.Label>
                                <Form.Control   
                                onChange={this.onChange}
                                size='sm'
                                defaultValue={player}
                                className='mb-2'
                                name='player'
                                label={pick}
                                as="select">
                                {players.map(({ name }) => (
                                        <option>{name}</option>          
                            ))}
                            </Form.Control>
                            </Form.Group>
                    </Form.Row>
                    ))}

                    <Button 
                        className='mb-5'
                        variant="success"
                        type="submit"
                        block
                        >Save Draft Board
                    </Button>
                </Form>
            </div>
        )
    }
}

DraftForm.propTypes = {
    player: PropTypes.object.isRequired,
    getPlayers: PropTypes.func.isRequired
}

const mapStateToProps = state => ({
    player: state.player
})

export default connect(mapStateToProps, { getPlayers })(DraftForm)

अजीब तरह से, यह पहले फॉर्म के साथ पूरी तरह से काम करता है, लेकिन अन्य सभी के साथ विफल रहता है, और मुझे ईवेंट बताते हुए एक त्रुटि मिलती है। लक्ष्य अपरिभाषित हैं। क्या कोई जानता है कि यह क्यों हो रहा है? धन्यवाद! यहां गड़बड़ी

संपादित करें: अनुरोध के अनुसार पूर्ण श्रेणी कोड शामिल करें

0
peachcore 18 अप्रैल 2020, 22:19

1 उत्तर

सबसे बढ़िया उत्तर

आपको $set के बजाय $merge का उपयोग करना चाहिए।

$set वस्तु बदलें

$merge संपत्ति को बदलें या जोड़ें लेकिन वस्तु गुणों को बनाए रखें

लेकिन समस्या यह है कि आपको सरणी में स्थिति शामिल करने की आवश्यकता है, शायद आपको इसकी आवश्यकता होगी draftboard सरणी के बजाय वस्तु होगी:

मैं दोनों समाधान दूंगा:

  • इस संरचना के साथ जारी रखें:
// state structure
state = {
        draftboard: [
            {
                1: {team:'', player: ''}
            },
            {
                2: {team:'', player: ''}
            },
            {
                3: {team:'', player: ''}
            },
            {
                4: {team:'', player: ''}
            }
       ]
}

// Test it in componentDidMount and it works
componentDidMount() {
    // this will change position 0 in `draftboard` and key 1 inside the object
    this.setState(
      prevState =>
        update(prevState, {
          draftboard: {
            0: {
              1: {
                $merge: {
                  team: "hey"
                }
              }
            }
          }
        }),
      () => {
        // this will change position 1 in `draftboard` and key 2 inside the object
        this.setState(prevState =>
          update(prevState, {
            draftboard: {
              1: {
                2: {
                  $merge: {
                    team: "how"
                  }
                }
              }
            }
          })
        );
      }
    );
  }

  • ऑब्जेक्ट में बदलें:

// state structure
 state = {
    draftboard: {
      1: { team: "", player: "" },
      2: { team: "", player: "" },
      3: { team: "", player: "" }
    }
  };

// Test it in componentDidMount and it works
componentDidMount() {
    this.setState(
      prevState =>
        update(prevState, {
          draftboard: {
            1: {
              $merge: {
                team: "team1"
              }
            }
          }
        }),
      () => {
        this.setState(prevState =>
          update(prevState, {
            draftboard: {
              1: {
                $merge: {
                  player: "team1"
                }
              }
            }
          })
        );
      }
    );
  }

अब यदि आप दूसरे उदाहरण में स्ट्रिंग्स, अंतिम संरचना द्वारा संख्या गुणों को बदलना चाहते हैं

// state structure
 state = {
    draftboard: {
      pick1: { team: "", player: "" },
      pick2: { team: "", player: "" },
      pick3: { team: "", player: "" }
    }
  };
// update structure

// We will change property player of key `pick1` in draftboard
this.setState(prevState =>
    update(prevState, {
        draftboard: {
            ['pick1']: {
             $merge: {
                player: "team1"
              }
            }
         }
     })
);
0
Adrian Naranjo 19 अप्रैल 2020, 07:21