Yo uso el componente de clase. Solo probándolo. Ahora no sé cómo convertirlo en funcional. Este es mi código:
class PostList extends Component { constructor(props) { super(props); this.state = { info: [] }; } componentDidMount() { axios .get("https://api2.binance.com/api/v3/ticker/24hr") .then((response) => { this.setState({ info: response.data }); console.log(response.data); }); } render() { const { info } = this.state; return ( <div> <h2>post!</h2> {info.map((user) => ( <div key={user.symbol}> <h6>{user.priceChange}</h6> </div> ))} </div> ); } } export default PostList;Debería usar este código en mi redux y necesito convertirlo en un componente funcional
Quiero algo como esto:
export const PostList = () =>{ return ( //my code using axios, ) }```Para el componente funcional, debe usar hooks en lugar de clasificar el state predeterminado de los componentes y el componentDidMount . Entonces, para definir un nuevo estado, debe usar useState y para componentDidMount debe usar useEffect :
const PostList = (props) => { const [state,setState] = useState({info:[]}); useEffect(()=>{ axios .get("https://api2.binance.com/api/v3/ticker/24hr") .then((response) => { setState({ info: response.data }); console.log(response.data); }); },[]) const { info } = state; return ( <div> <h2>post!</h2> {info.map((user) => ( <div key={user.symbol}> <h6>{user.priceChange}</h6> </div> ))} </div> ); } export default PostList;¡Ya que desea utilizar componentes funcionales, tendrá que utilizar React Hooks !
En su caso, usar los ganchos useState y useEffect puede ayudar a lograr el mismo resultado que this.state y componentDidMount() respectivamente.
const PostList = (props) => { const [state,setState] = useState({info:[]}); useEffect(()=>{ axios .get("https://api2.binance.com/api/v3/ticker/24hr") .then((response) => { setState({ info: response.data }); console.log(response.data); }); },[]) return ( <div> <h2>post!</h2> {state.info.map((user) => ( <div key={user.symbol}> <h6>{user.priceChange}</h6> </div> ))} </div> ); } export default PostList;