Reactjs Material 在 TextField 中加载 defaultValue 并且无法读取未定义的属性“地图”

Question

我这里有两个问题。

1. 无法在TextField加载defaultValue 。 我正在使用 reactjs 材料
2. 当我开始输入输入TextField 。 它在下面抛出错误

无法读取未定义的属性“地图”

谁能告诉我哪里出错了？

ShipmentDetail.tsx

 interface ShipmentInterface { detail: any; } export class ShipmentDetail extends Component<any, ShipmentInterface> { constructor(props: any) { super(props); this.state = { detail: '' }; this.handleChange = this.handleChange.bind(this); // nameUpdate: this.state.detail.name; } componentDidMount() { this.getShipmentDetail(); } getShipmentDetail() { let { params } = this.props.match; params = params.id; axios .get(`http://localhost:3001/shipments/${params}`) .then((response: any) => { this.setState({ detail: response.data }); }); } handleChange = (event: any) => { event.preventDefault(); this.setState({ detail: { name: event.target.value } }); }; render() { return ( <Card className="Card"> <CardContent className="Card-Content"> <Grid container spacing={3}> <Grid item xs={12}> <div className="Card-Content__Header"> <TextField id="outlined-name" label="Name" defaultValue={this.state.detail.name || ''} className="Card-Content__Header--Title" onChange={this.handleChange} fullWidth={true} margin="normal" variant="outlined" /> </div> </Grid> // I believe second error comes from here <Grid item xs={12} className="Card-Content__Table"> {this.state.detail && this.state.detail.cargo.map((item: any, index: number) => ( <CargoList key={index} value={item} /> ))} </Grid> </Grid> </CardContent> </Card> ); } } export default ShipmentDetail;

数据库.json

 { "id": "S1002", "name": "PO89634, PO27X", "cargo": [ { "type": "Bikes model 27X", "description": "100 Bikes model 27X", "volume": "100" } ], "mode": "air", "type": "LCL", "destination": "Saarbrücker Str. 38, 10405 Berlin", "origin": "Shanghai Port", "services": [ { "type": "customs" } ], "total": "10000", "status": "COMPLETED", "userId": "U1001" }

Answer 1

第二个错误是因为您正在覆盖您的状态，您需要确保保留detail上的其他道具，尤其是cargo数组：

handleChange = (event: any) => {
        event.preventDefault();
         this.setState({
           detail: {
            ...this.state.detail,
            name: event.target.value
           }
        });
      };