Reactjs Material 在 TextField 中加载 defaultValue 并且无法读取未定义的 属性 'map'

Question

我这里有两个问题。

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

Cannot read property 'map' of undefined

谁能告诉我哪里出错了？

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;

db.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
           }
        });
      };