Tengo problemas para establecer el estado de la variable isCorrectAnswer dentro de una llamada axios. Recibo el error Cannot read properties of undefined (reading 'setState') en el registro de la consola. ¿Qué estoy haciendo mal? El estado inicial de la variable isCorrectAnswer es constructor(props) {super(props)this.state = { isCorrectAnswer: false }}
y la llamada axios es
axios.post( "API/path/to/ressource", postData, { headers: { "X-Access-Token": "token", }, } ) .then(function (res) { this.setState({ isCorrectAnswer: res.data.correct //Here im trying to change the state }, () => console.log(this.state.isCorrectAnswer)) //and logging into console }) .catch(function (error) { console.log(error); });Cuando llama a una función (función sin flecha), this siempre es un parámetro implícito.
Funciones normales
Por funciones normales me refiero a funciones que no son métodos.
En modo estricto, el valor de this siempre está undefined .
Y en modo no estricto, el valor de this es siempre el objeto global ( window en los navegadores)
function foo() { "use strict"; return this; } function bar() { return this; } console.log(foo() === undefined); // true console.log(bar() === window); // trueMétodos
this se refiere al objeto en el que se ha invocado el método.
function foo() { "use strict"; return this; } const obj = { foo }; console.log(obj.foo() === obj); // true Y en su caso then la devolución de llamada pasada es una función normal (no un método), por lo this está configurada como undefined , por lo tanto, está recibiendo un error.
Actualice a una función de flecha y resolvería el problema porque las funciones de flecha no tienen su propio this , en las funciones de flecha this se decide en función del alcance léxico. Revisa el ejemplo a continuación:
const getRandomNums = (delay) => new Promise((res) => setTimeout(() => res([5, 2, 3]), delay)); class App extends React.Component { constructor() { super(); this.state = { nums: [] }; } componentDidMount() { getRandomNums(1500).then((nums) => { this.setState({ nums }); }); } render() { return <div>{JSON.stringify(this.state.nums, null, 2)}</div>; } } ReactDOM.render(<App />, document.getElementById("root")); <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="root"></div>También puedes usar la función de flecha en lugar de function
axios.post( "API/path/to/ressource", postData, { headers: { "X-Access-Token": "token", }, } ) .then((res) => { this.setState({ isCorrectAnswer: res.data.correct //Here im trying to change the state }, () => console.log(this.state.isCorrectAnswer)) //and logging into console }) .catch((error) => { console.log(error); });