更改状态变量的状态后如何重新呈现页面？

Question

按下按钮时，我在 reactjs 中设置状态变量的状态。我调用了以下过程（实际上正在调用）。

nextSuggestion() {
        console.log(this.state.suggestions_index);
        this.state.suggestions_index = this.state.suggestions_index + 1;
        console.log(this.state.suggestions_index);
    }

上面的函数被调用并且页面没有重新渲染，即使我有以下componentDidMount()：

async componentDidMount(){

        const query = new URLSearchParams(this.props.location.search);

        const token = query.get('token');


        const url = "http://www.mocky.io/v2/" + token;


        this.setState({url_prod: url});    

        const response = await fetch(url);
        const data = await response.json();
        this.setState({produto: data.suggestions[this.state.suggestions_index], loading_produto: false})
        this.setState({alternativas: data.choices, loading_alternativas: false})
        this.setState({atributos: data.suggestions[this.state.suggestions_index].product_data.attributes, loading_atributos: false})

    }

按钮是通过render()函数中的这段代码创建的：

  if(!this.state.loading_alternativas){

    this.texts = lista_alternativas.map((text, key) => {


        return  <div id="center-button"><button type="button" className="btn btn-primary" key={text.id} onClick={this.nextSuggestion.bind(this)}>{text.text}</button></div>
    });
}

国家：

state = {
        produto: null,
        alternativas: null,
        atributos: [],
        suggestions_index: 0,
        loading_produto: true,
        loading_alternativas: true,
        loading_atributos: true,
        showPopupDescProd: false,
        showPopupAnswer: false,
        url_prod: null,
    };

为了让它发挥作用，我缺少什么？

Answer 1

你正在改变状态：

this.state.suggestions_index = this.state.suggestions_index + 1;

这是一件坏事。更具体地说，它不是 ReactJS 框架所期望的，因此没有理由重新渲染。

不要直接设置状态值。使用新的状态对象更新状态。例如：

this.setState((prevState) => ({
    suggestions_index: prevState.suggestions_index + 1
}));

调用setState() 并通知框架以用新状态替换当前状态，在适用的情况下触发重新渲染。

---

编辑：作为对Andy's comment 的回应（我从中学到了一些新东西，谢谢安迪！），还要注意setState() 本质上是异步的。由于您希望在设置状态后登录到控制台，因此您希望在回调中执行此操作。例如：

const newState = {
    ...this.state
    suggestions_index: this.state.suggestions_index + 1
};
this.setState(newState, () => console.log(this.state.suggestions_index));

（虽然我怀疑您的 console.log 使用只是暂时的调试，并且可能会删除，所以您只需省略回调。）