javascript - react native : changing state via external function doesn't rerender

Question

我根据需要创建了一个函数，仅当它与之前的值不同时才更改状态(即如果不相同则切换)。但是，它不会重新呈现组件。有人可以让我知道我做错了什么吗？但它确实改变了状态。

export function toggleState(thi_s, k, new_v)
{
    if(thi_s.state[k]!=new_v)
    {
        thi_s.state[k] = new_v;
        return true;
    }

    return false;
}

。.

[用法]

if(this.state.xyz!=true) this.setState({xyz:true}); //does rerender as expected

.

toggleState(this, 'xyz', true); //doesn't rerenders 

状态已更改而无需重新渲染，我可以在调用后立即使用 console.log 检查它

Answer 1

在 toggleState 中，您没有调用 setState 而是直接改变状态，这是您永远不应该做的，也是不触发重新渲染的原因:

thi_s.state[k] = new_v;

将其更改为

thi_s.setState({[k]: new_v});

此外，您应该考虑使用箭头函数或 .bind(this)，而不是将 this 传递给 toggleState，这样您就可以在函数内部引用 this ，而不将其作为参数传递。