Estoy usando un backend de matraz y un frontend de reacción para crear un sitio web y encuentro un error al obtener una URL del backend.
la parte del backend tiene una base de datos y la devuelve como un json
@app.route('/getlists', methods=['GET','POST']) def getlists(): if request.method == 'GET': user_id = session.get("user_id") lists = ListOfLists.query.filter_by(user_id = user_id).all() return jsonify(lists)que se ve así, por ejemplo:
[ { "color": "#ffffff", "name": "name1" }, { "color": "#ee3a70", "name": "name2" } ]y mi interfaz debería obtener la URL del servidor y mostrar los datos como una lista
export default function UserPage() { const [allValues, setAllValues] = useState({ color: '', name: '', }); useEffect(() => { fetch('http://localhost:5000/getlists') .then(response => response.json()) .then(data => setAllValues(data.color)) .then(data => setAllValues(data.name)) },[]) const ListGroupItem = (lgi, index) => { return ( <ListGroup.Item variant="default" key={index} style={{ textAlign: 'right', color: "white", background: lgi.color }} as="li" action href="#link1" > {lgi.title} </ListGroup.Item> ) }; return (...) aunque cada vez que intento representar la lista, me da Unhandled Rejection (TypeError):Failed to fetch
¿Hay algún problema con mi código? o hay una manera más fácil de hacer esto?
Mi problema es que session.get("user_id") devuelve Ninguno, publiqué otra pregunta sobre esto.
Creo que el problema es que está usando setAllValues de manera incorrecta, porque hay un objeto {color, name} y está configurando todo el estado en color y luego restableciendo el nombre, simplemente intente configurar data=>setAllValues(data) y cambie el estado predeterminado para que sea una matriz de objetos en lugar de solo un objeto, setState([]) .