Funkce vyhledávání nepracuje pro frontendu

hlasů
0

zadejteJsem získávání dat z backendu pomocí pošťák. Ale když jsem pomocí rozhraní pro stejné, to nefunguje. Jsem dostat chyby, jako 1.TypeError: Nelze přečíst vlastnost ‚mapu‘ null 2.Unhandled Zamítnutí (TypeError): Nelze přečíst vlastnost ‚mapu‘ null.

Myslím, že jsem dostat tuto chybu, protože karty nejsou schopni učinit, když jsem searching.The backend dat přichází jako pole.

zadejte

const styles = theme => ({
  appBar: {
    position: 'relative',
  },
  icon: {
    marginRight: theme.spacing.unit * 2,
  },
  layout: {
    width: 'auto',
    marginLeft: theme.spacing.unit * 3,
    marginRight: theme.spacing.unit * 3,
    [theme.breakpoints.up(1100 + theme.spacing.unit * 3 * 2)]: {
      width: 1100,
      marginLeft: 'auto',
      marginRight: 'auto',
    },
  },
  cardGrid: {
    padding: `${theme.spacing.unit * 8}px 0`,
  },
  card: {
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
  },
  cardContent: {
    flexGrow: 1,
  },
});

class Products extends Component {


  constructor(props) {
    super(props);

    this.state = {
      products: [],
      searchString: ''
    };
    this.onSearchInputChange = this.onSearchInputChange.bind(this);
    this.getProducts = this.getProducts.bind(this);
  }

  componentDidMount() {
    this.getProducts();
  }



  // delete = id => {
  //   axios.post('http://localhost:9022/products/delete/' + id)
  //     .then(res => {
  //       let updatedProducts = [...this.state.products].filter(i => i.id !== id);
  //       this.setState({ products: updatedProducts });
  //     });
  // }

  delete = id => {
    axios.post('http://localhost:9022/products/delete/' + id)
      .then(res => {

        this.setState((prevState, prevProps) => {
          let updatedProducts = [...prevState.products].filter(i => i.id !== id);
          return ({
            products: updatedProducts
          });
        });
      });
  }

  getProducts() {
    axios.get('http://localhost:9022/products/getAll')
      .then(res => {
        this.setState({ products: res.data }, () => {
          console.log(this.state.products);
        });
      });
  }

  onSearchInputChange = (event) => {
    let newSearchString = '';
    if (event.target.value) {
      newSearchString = event.target.value;
    }
    axios.get('http://localhost:9022/products/getproducts' + newSearchString)
      .then(res => {
        this.setState({ products: res.data });
        console.log(this.state.products);
      });
    this.getProducts();
  }

  // onSearchInputChange(event) {
  //   let newSearchString = '';
  //   if (event.target.value) {
  //     newSearchString = event.target.value;
  //   }

  //   // call getProducts once React has finished updating the state using the callback (second argument)
  //   this.setState({ searchString: newSearchString }, () => {
  //     this.getProducts();
  //   });
  // }

  render() {
    const { classes } = this.props;
    return (
      <React.Fragment>
        <TextField style={{ padding: 24 }}
          id=searchInput
          placeholder=Search for products
          margin=normal
          onChange={this.onSearchInputChange} />
        <CssBaseline />
        <main>
          <div className={classNames(classes.layout, classes.cardGrid)}>
            <Grid container spacing={40}>
              {this.state.products.map(currentProduct => (
                <Grid item key={currentProduct.id} sm={6} md={4} lg={3}>
                  <Card className={classes.card}>

                    <CardContent className={classes.cardContent}>
                      <Typography gutterBottom variant=h5 component=h2>
                        {currentProduct.title}
                      </Typography>
                      <Typography>
                        {currentProduct.price}
                      </Typography>
                    </CardContent>
                    <CardActions>

                      <Button size=small color=primary component={Link} to={/products/ + currentProduct.id}>
                        Edit
                    </Button>
                      <Button size=small color=primary onClick={() => this.delete(currentProduct.id)}>
                        Delete
                    </Button>
                    </CardActions>
                  </Card>
                </Grid>
              ))}
            </Grid>
          </div>
        </main>
      </React.Fragment>
    )
  }
}

Products.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Products);
Položena 20/10/2018 v 12:56
zdroj uživatelem
V jiných jazycích...                            


2 odpovědí

hlasů
2

Bylo zjištěno, že jste přidali nesprávnou adresu URL getproducts, lomítko chybí v URL. Naleznete podrobnosti níže:

Pokud search-string je r, pak používáte tuto adresu URL getproducts: http://localhost:9022/products/getproductsr

což je špatně a to by mělo být http://localhost:9022/products/getproducts/r

Z tohoto důvodu budete muset změnit svůj kód načítání produktů takto:

axios.get('http://localhost:9022/products/getproducts/' + newSearchString)
.then(res => {
    this.setState({ products: res.data });
    console.log(this.state.products);
});

Také to bude dobré, aby šek na nedefinovaný / null pro this.state.products a pak vykreslit složek, protože je možné, že zboží může být null, pokud jeden poskytnout nesprávnou adresu a nedefinované jako požadavek Axios je asynchronní. Tudíž přidáním ‚this.state.products &&‘ ve stávajících vykreslení kód bude dobré, aby se zabránilo těchto problémů. I aktualizovaly render funkci, najdete jej níže:

render() {
    const { classes } = this.props;
    return (
      <React.Fragment>
        <TextField style={{ padding: 24 }}
          id="searchInput"
          placeholder="Search for products"
          margin="normal"
          onChange={this.onSearchInputChange} />
        <CssBaseline />
        <main>
          <div className={classNames(classes.layout, classes.cardGrid)}>
            <Grid container spacing={40}>
              {this.state.products && this.state.products.map(currentProduct => (
                <Grid item key={currentProduct.id} sm={6} md={4} lg={3}>
                  <Card className={classes.card}>

                    <CardContent className={classes.cardContent}>
                      <Typography gutterBottom variant="h5" component="h2">
                        {currentProduct.title}
                      </Typography>
                      <Typography>
                        {currentProduct.price}
                      </Typography>
                    </CardContent>
                    <CardActions>

                      <Button size="small" color="primary" component={Link} to={"/products/" + currentProduct.id}>
                        Edit
                    </Button>
                      <Button size="small" color="primary" onClick={() => this.delete(currentProduct.id)}>
                        Delete
                    </Button>
                    </CardActions>
                  </Card>
                </Grid>
              ))}
            </Grid>
          </div>
        </main>
      </React.Fragment>
    )
}

Doufám, že to pomůže ..

Odpovězeno 20/10/2018 v 13:31
zdroj uživatelem

hlasů
1

Můžete zkusit tohle:

Jen jste vynechal lomítko API koncovým bodem jak je uvedeno níže: Použijte

axios.get('http://localhost:9022/products/getproducts/' + newSearchString)

namísto :

axios.get('http://localhost:9022/products/getproducts' + newSearchString)
Odpovězeno 20/10/2018 v 13:40
zdroj uživatelem

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more