Question

所以我在数组的.map中使用材质ui组件，如果我尝试更改.map显示的其中一个值，它会崩溃我的应用程序并说.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,
    });
};

这是代码，由于某些原因，在您更改数据之后它会重新加载并说.map不是一个函数我没有足够的javascript知识来自己调试它，甚至还显示了另一个开发人员，他不知道发生了什么。

Answer 1

您需要在句柄更改中创建新数组而不是新对象。所以改变

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

到

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

Answer 2

在handleChangeAddress中，您将Addresses设置为Object.assign()的对象，然后将该对象设置为该状态。对象没有.map方法。

如果你生成并返回了一个数组，那么它应该可以工作。

on reload .map不是函数reactjs

2 个答案: