为什么我的 setState 在作为参数传递给函数时不起作用？

Question

对于函数 fetchApiAndSetStateForWrongGuesses() 我给它传递了两个参数 randNum 和 wrongGuess . randNum 只是一个数字，但 wrongGuess 应该是一个状态。问题是，当我将 wrongGuess 传递给函数 fetchApiAndSetStateForWrongGuesses() 时，setState 不起作用。当它到达 console.log 时，它只是打印出一个空字符串，因为这是构造函数将其初始化的内容。我怎样才能得到它，以便 setState 根据我传递给它的状态实际工作？

class PokemonGenerator extends Component {
totalPokemon = 151

constructor() {
    super()
    this.state = {
        currentImg: "https://d.newsweek.com/en/full/822411/pikachu-640x360-pokemon-anime.jpg?w=1600&h=1200&q=88&f=3ed1c0d6e3890cbc58be90f05908a8f5",
        currentName: "",
        wrongChoice1: "",
        wrongChoice2: "",
        wrongChoice3: "",
    }
    this.handleClick = this.handleClick.bind(this)
    this.handleChange = this.handleChange.bind(this)
}

handleClick(event) {
    // event.preventDefault()
    const randNum1 = Math.floor(Math.random() * this.totalPokemon)
    const randNum2 = Math.floor(Math.random() * this.totalPokemon)
    const randNum3 = Math.floor(Math.random() * this.totalPokemon)
    const randNum4 = Math.floor(Math.random() * this.totalPokemon)
    

    fetch('https://pokeapi.co/api/v2/pokemon/' + randNum1)
    .then(response => response.json())
    .then(response => {
        this.setState({ 
            currentImg: response['sprites']['front_default'],
            currentName: response.name
        }, function() {console.log(`CORRECT ANSWER: ${this.state.currentName}`)})
    })

    this.fetchApiAndSetStateForWrongGuesses(randNum2, this.state.wrongChoice1)
    this.fetchApiAndSetStateForWrongGuesses(randNum3, this.state.wrongChoice2)
    this.fetchApiAndSetStateForWrongGuesses(randNum4, this.state.wrongChoice3)
}

fetchApiAndSetStateForWrongGuesses(randNum, wrongGuess) {

    fetch('https://pokeapi.co/api/v2/pokemon/' + randNum)
        .then(response => response.json())
        .then(response => {
            this.setState({
                wrongGuess: response.name
            }, function () {console.log(`Wrong Choice: ${wrongGuess}`)})
        })
}

Answer 1

这可能是因为 this 存在的上下文。尝试这样做：

fetchApiAndSetStateForWrongGuesses(randNum, wrongGuess) {
    const self = this
    fetch('https://pokeapi.co/api/v2/pokemon/' + randNum)
        .then(response => response.json())
        .then(response => {
            self.setState({
                wrongGuess: response.name
            }, function () {console.log(`Wrong Choice: ${wrongGuess}`)})
        })
}

Answer 2

您的初始状态中没有 wrongGuess 个状态

 this.state = {
            currentImg: "https://d.newsweek.com/en/full/822411/pikachu-640x360-pokemon-anime.jpg?w=1600&h=1200&q=88&f=3ed1c0d6e3890cbc58be90f05908a8f5",
            currentName: "",
            wrongChoice1: "",
            wrongChoice2: "",
            wrongChoice3: "",
        }

Answer 3

在您的回调函数中，wrongGuess 仍然绑定到您传递给该函数的参数。 setState 更新 this.state，因此您需要从那里访问新值。

    fetch('https://pokeapi.co/api/v2/pokemon/' + randNum)
        .then(response => response.json())
        .then(response => {
            this.setState({
                wrongGuess: response.name
            }, function () {console.log(`Wrong Choice: ${this.state.wrongGuess}`)})
        })

为什么我的 setState 在作为参数传递给函数时不起作用？

Why is my setState not working when passed as an argument to a function?

javascript

state

setstate

reactjs

react-native