はリロード.mapは関数ではありません

Question

これは、配列の.mapの内部にあるuiコンポーネントを使用しています。もし私が.mapで表示された値の1つを変更しようとすると、アプリケーションがクラッシュしてしまいます。マップはなぜ関数ではありませんか？以下に私のコードを示します。コードであり、あなたがデータを変更した後、何らかの理由でそれがリロードを行い、私はそれを自分自身をデバッグできるようにするにはJavaScriptを十分な知識を持っていない機能が.MAPではないと言う

<div className="box-container"> 
     {this.props.appState.ApplicationPK === '' ? '' : 
     this.state.AddressesPOne.map(function (address, index) { 
      return (
      value === index && <TabContainer key={index}> 
       <h1>Address: {address.AddressPK}</h1> 
       <FormControl className={classes.formControl}> 
        <TextField 
        id="Street" 
        label="Street" 
        type="Street" 
        value={self.state.AddressesPOne[index].Street} 
        className={classes.input} 
        onBlur={self.props.handleChangeAddress(index, 0, 'Street')} 
        onChange={self.handleChangeAddress(index, 0, 'Street')} 
        name="Street" 
        /> 
       </FormControl> 
       <FormControl className={classes.formControl} > 
        <TextField 
        id="District" 
        label="District" 
        type="District" 
        value={self.state.AddressesPOne[index].District} 
        className={classes.input} 
        onBlur={self.props.handleChangeAddress(index, 0, 'District')} 
        onChange={self.handleChangeAddress(index, 0, 'District')} 
        name="District" 
        /> 
       </FormControl> 
       <FormControl className={classes.formControl} > 
        <TextField 
        id="Town" 
        label="Town" 
        type="Town" 
        value={self.state.AddressesPOne[index].Town} 
        className={classes.input} 
        onBlur={self.props.handleChangeAddress(index, 0, 'Town')} 
        onChange={self.handleChangeAddress(index, 0, 'Town')} 
        name="Town" 
        /> 
       </FormControl> 
       <FormControl className={classes.formControl} > 
        <TextField 
        id="County" 
        label="County" 
        type="County" 
        value={self.state.AddressesPOne[index].County} 
        className={classes.input} 
        onBlur={self.props.handleChangeAddress(index, 0, 'County')} 
        onChange={self.handleChangeAddress(index, 0, 'County')} 
        name="County" 
        /> 
       </FormControl> 
       <FormControl className={classes.formControl} > 
        <TextField 
        id="Postcode" 
        label="Postcode" 
        type="Postcode" 
        value={self.state.AddressesPOne[index].Postcode} 
        className={classes.input} 
        onBlur={self.props.handleChangeAddress(index, 0, 'Postcode')} 
        onChange={self.handleChangeAddress(index, 0, 'Postcode')} 
        name="Postcode" 
        /> 
       </FormControl> 
       <FormControl className={classes.formControl}> 
        <InputLabel htmlFor="ResidentialStatusFK-Dropdown">Title</InputLabel> 
        <Select 
        native 
        value={self.state.AddressesPOne[index].ResidentialStatusFK} 
        onChange={self.handleChangeAddress(index, 0, 'ResidentialStatusFK')} 
        onBlur={self.props.handleChangeAddress(index, 0, 'ResidentialStatusFK')} 
        input={<Input id="ResidentialStatusFK-Dropdown" />} 
        > 
        <option value="" /> 
        <option value="1">Home Owner</option> 
        <option value="2">Renting</option> 
        <option value="3">Living With Parents</option> 
        </Select> 
       </FormControl> 
       <FormControl className={classes.formControl}> 
        <TextField 
        id="date" 
        label="Date Moved In" 
        type="date" 
        defaultValue={self.state.AddressesPOne[index].DateMovedIn.split('T')[0]} 
        onChange={self.handleChangeAddress(index, 0, 'DateMovedIn')} 
        onBlur={self.props.handleChangeAddress(index, 0, 'DateMovedIn')} 
        className={classes.textField} 
        InputLabelProps={{ 
         shrink: true, 
        }} 
        /> 
       </FormControl> 
       <FormControlLabel 
        control={ 
        <Checkbox 
         checked={self.state.AddressesPOne[index].IsCurrentAddress} 
         onChange={self.handleChangeCheck('IsCurrentAddress')} 
         value="IsCurrentAddress" 
        /> 
        } 
        label="Current Address" 
       /> 
       </TabContainer> 
     ); 
     })} 
    </div> 

handleChangeAddress = (addressIndex, personIndex, field) => event => { 
    const Addresses = Object.assign({}, this.state.AddressesPOne); 
    Addresses[addressIndex][field] = event.target.value; 
    this.setState({ 
     AddressesPOne: Addresses, 
    }); 
}; 

、 iveは別の開発者を示していて、何が起こっているのかわからない。

Answer 1

ハンドルの変更で新しいオブジェクトの代わりに新しい配列を作成する必要があります。だから、Object.assign()で対象となるAddressesを設定して、状態にそのオブジェクトを設定しているhandleChangeAddressで

const Addresses = Object.assign([], this.state.AddressesPOne); 

Answer 2

に

const Addresses = Object.assign({}, this.state.AddressesPOne); 

を変更。オブジェクトには.mapメソッドがありません。

代わりに配列を生成して返した場合、これはうまくいくはずです。