Closed Wanhenri closed 4 years ago
To solve this problem, configure a route output as a json file:
def get_user(self):
product = Product.query.all()
results = [
{
"id":products.id,
"name":products.name,
"code":products.code,
"price":products.price
} for products in product]
return {"count": len(results), "product": results}
similar feat for the vendor
I can read via the console in the browser, but fetch does not pass to useState
export default function Data () {
const [product, setProduct] = React.useState([]);
useEffect(() => {
fetch(`${process.env.REACT_APP_API_URL}/product_item`, {
method: "GET",
headers: {
"Content-Type": "application/json"
}
})
.then((response) => response.json())
.then(data => {
setProduct(data)
})
.catch((error) => console.log(error));
}, []);
useEffect(() => {
console.log(product)
},[product])
return (
<Wrapper >
<h1>TESTE</h1>
{product.map(w => (
<h1>{w.name}</h1>
))}
<SimpleTable name="Product" code="Code" price="Price" button="Add Product" path="/product"/>
<SimpleTable name="Vendor" code="CNPJ" price="City " button="Add Vendor" path="/vendor"/>
</Wrapper>
);
Solution:
const [product, setProduct] = React.useState([]);
const [posts, setPosts] = React.useState([]);
and
.then(data => {
setProduct(data)
})
.then(data => {
console.log(data)
setPosts(data.product)
})
.then(data => {
console.log(data)
setPosts(data.product)
})
```js
.then(data => {
console.log(data)
setPosts(data)
})
Use:
{posts.map(w => (
<h1>{w.id}</h1>
))}
-after
{posts.product&&posts.product.map(w => (
<h1>{w.id}</h1>
))}
To prevent him from making an undefined map (), and I can still extract the 'count' from the json file
or I will create other:
const [state, setState] = React.useState([]);
and pass the
setState(data.count)
TypeError: Object of type Product is not JSON serializable