Блог

Каждый раз, когда я обновляю текст ввода, он не обновляется. Когда я обновляю текст во второй раз, состояние обновляется до текста первого обновления. Я не уверен, что именно происходит, но я подозреваю, что это ошибка глубокого / мелкого копирования, которую я не вижу? Любая помощь будет оценена

     const DropDownPrompt = (props) => {

    //set type by passing hook through props
    const [dropDownOptions, setDDoptions] = useState([{id : 1 , value : "Value 1"},{id : 2 , value : "Value 2"}]);

    return (
  
        <div className="mb-0 p-3">
        <Row>
            <Col>
    <FormGroup>
    <Label htmlFor="exampleSelect" style={{fontWeight : "bold"}}>Preview</Label>
    <Input type="select" name="select" id="exampleSelect">
        {dropDownOptions? dropDownOptions.map((ddO) => 
            <option>{ddO.value}</option>
        ):null}
    </Input>
</FormGroup>
</Col>
<Col>
<Label style={{fontWeight : "bold"}} >Options (at least 2)</Label>
{dropDownOptions? dropDownOptions.map((ddO, index) => 
<Row>
            <FormGroup>
                <Label  check >
              <Input  key = {index } type="text" value = {ddO.value} bsSize="sm"  onChange= { async (e) =>{
           
                  let carrier = [...dropDownOptions]

                  carrier[ddO.id - 1] = {...carrier[ddO.id - 1], value : e.target.value }
                  
                  
                  setDDoptions(carrier)

                console.log(dropDownOptions)
                
                  }} />

              </Label>
            
              {ddO.id > 2 ?
              <Button className="btn-wrapper--icon ml-2 btn-link btn-sm" >
            <FontAwesomeIcon icon={['fas', 'minus-circle']} className="font-size-lg text-danger" />
            </Button>:null}
            </FormGroup>
            </Row>
        ):null}

    



<Button  className="btn-link" onClick = {() => {setDDoptions ([...dropDownOptions, {id : dropDownOptions.length   1, value : `Value ${dropDownOptions.length   1}`}])}} >
                <span className="btn-wrapper--icon">
                    <FontAwesomeIcon icon={['fas', 'plus-circle']} className="font-size-lg" />
                </span>
                <span className="btn-wrapper--label">
                    Add another
            </span> </Button>
</Col>
</Row>
</div>

        )
  }

  export default (DropDownPrompt)