Soy nuevo en React y tengo una pregunta de 2 partes:
Estoy tratando de imprimir datos de una API en React usando el siguiente código, pero no obtengo ningún resultado. ¿Cual es el problema?
Después de que se imprima la categoría y la pregunta, quiero que se oculte la respuesta. Solo debe revelarse cuando se hace clic en el botón. ¿Cómo logro esto?
class Question extends React.Component { constructor(props) { super(props); this.state = { category: [], question: [], answer: [], revealed: [false] }; } componentDidMount() { axios({ url: "http://jservice.io/api/random?count=1", method: "GET" }) .then((result) => { this.setState({ category: result.category, question: result.question, answer: result.answer }); }); } render() { const { category } = this.state; const { question } = this.state; const { answer } = this.state; return( <div> <div> {category} </div> <div> {question} </div> <div> {answer} </div> <button type="button" onClick={() => this.answer.setState(true)}>Reveal answer</button> </div> ); }}export default Question;Este código necesita mucha refactorización.
Esto definitivamente lo hará:
import React, { useState, useEffect } from 'react'; const Question = () => { const [question, setQuestion] = useState(); const [category, setCategory] = useState({ title: 'default title' }); const [answer, setAnswer] = useState(); const [showAnswer, setShowAnswer] = useState(false); useEffect(() => { axios({ url: 'http://jservice.io/api/random?count=1', method: 'GET', }).then((result) => { setQuestion(result[0].question); setAnswer(result[0].answer); setCategory(result[0].category); }); }, []); return ( <div> <div>Category: {category.title}</div> <div>Question: {question}</div> <div>Answer: {showAnswer ? answer : null}</div> <div> <button onClick={() => setShowAnswer(true)}>Reveal Answer</button> </div> </div> ); }; export default Question;En lo anterior, utilicé useEffect para eventos del ciclo de vida como componentDidMount y useState hook para administrar el estado en este componente funcional.
Puede crear una función para actualizar revealed y luego puede pasar por accesorios revealed para crear el ternario {revealed ? answer : ""}
Si este es un proyecto tuyo, ¡te recomendaría comenzar a usar ReactJS con ganchos!
class Question extends React.Component { constructor(props) { super(props); this.state = { category: [], question: [], answer: [], revealed: false }; // Binding this keyword this.updateState = this.updateState.bind(this) } updateState(){ // Changing state this.setState({ revealed: true, }) } componentDidMount() { axios({ url: "http://jservice.io/api/random?count=1", method: "GET" }) .then((result) => { this.setState({ category: result.category, question: result.question, answer: result.answer }); }); } render() { const { category, question, answer, revealed } = this.state; return( <div> <div> {category} </div> <div> {question} </div> <div> {revealed ? answer : ""} </div> <button type="button" onClick={this.updateState}>Reveal answer</button> </div> ); }} export default Question;