Reactjs 组件未在状态更改时更新

我希望文本字段的值是某个计算值。。。因此，我有一个受控表单，

ComputedValue

，其呈现方法如下所示：

render() {
    return <TextField
        value={this.state.value}
        key={this.props.id}
        id={this.props.id}
        label={this.props.label}
        inputProps={{
            readOnly: true
        }}
    />;
}

computeValue() {
    let computedValue="";

    // split the computation string into constituent components
    let splitCS = this.props.computationString.split(/([+,-,*,/,(,),^])/g);

    // replace all instaces of questionID's with their value
    for (let i = 0; i < splitCS.length; i++) {
        if (splitCS[i] !== '+' && splitCS[i] !== '-' && splitCS[i] !== '*' &&   splitCS[i] !== '/' &&
            splitCS[i] !== '(' && splitCS[i] !== ')' && splitCS[i] !=='^') {
                // splitCS[i] is a questionID
                let Q = getQuestionDataFromLSbyQuestionID(splitCS[i]); 
                splitCS[i] = Q.value;
            }
    }

    // check that all values returned 
    if(splitCS.includes("")) {
        console.log("null value was returned in ComputedValue question");
    } else {
        // rejoin string and send to eval (TODO: replace eval)
        let finalComputeString = splitCS.join('')
        computedValue = eval(finalComputeString);
    }

    // save value in state
    this.setState({
        value: computedValue
    }, () => {
        this.props.stateChangeHandler(this);
        this.render();
    }
    );

    return computedValue;
}

这个组件是问题树中的一片叶子；当它们的值发生变化时（我的应用程序同步LS和主家长的状态），我希望计算的值发生变化

以下是我的两个问题：

1） 给定我在computeValue函数中调用

setState

。。。我无法从render函数中调用它。但是，如果我仅从

componentWillMount

lifecycle函数调用它，那么它

computeValue

只会被调用一次（装载时），然后就不会再被调用。如果我从组件willupdate调用它，我会得到一个无限循环。我可以通过比较nextStates和not来停止这个循环。。。但这似乎不是最好的办法

---

2） 父级状态的更新不会触发渲染。。包括尝试“forceUpdate”（尽管它们似乎是通过鼠标悬停和其他各种UI操作触发的）。

我认为你的答案在第二次观察中。[父级状态的更新不会触发渲染]。猜猜从父级渲染什么触发器？道具

因此，不要把你的值放在状态中，而是把它放在道具中，这样，如果父对象改变它，你的组件也会改变

---

希望这能有所帮助

我想你的答案在你的第二次观察中。[父级状态的更新不会触发渲染]。猜猜从父级渲染什么触发器？道具

因此，不要把你的值放在状态中，而是把它放在道具中，这样，如果父对象改变它，你的组件也会改变

希望这有帮助

如果我在computeValue函数中调用setState。。。我不能 从渲染函数中调用它

我想请你详细说明或澄清这一立场

但是，如果我只从组件调用它，它将装载生命周期 函数，它只会被调用一次（装载时）和 那就别再这样了

Yes componentWillMount是一个生命周期钩子，在将组件添加到树中时只调用一次

如果我从componentWillUpdate调用它，就会得到一个无限循环

在更新组件之前调用此生命周期挂钩。所以如果你在这里设置你的状态，它会再次调用这个函数，它会形成一个无限循环

我可以通过比较nextStates和not来停止这个循环。。。 但这似乎不是最好的办法

您始终可以进行比较并更新状态。没有什么比这样做更像是错误的方式了

父级状态的更新不会触发渲染。。 包括尝试“强制更新”）

决不能显式调用

render

。这不是一个正确的做法，因为它阻碍了反应的正常流动

我想让你测试一下设置状态

this.setState(() => ({
    value: computedValue
}), () => {
    console.log("working")
    this.props.stateChangeHandler(this);
}
);

问题似乎是

（{value:computedValue}）

中的

（）

。试试看

如果我在computeValue函数中调用setState。。。我不能 从渲染函数中调用它

我想请你详细说明或澄清这一立场

但是，如果我只从组件调用它，它将装载生命周期 函数，它只会被调用一次（装载时）和 那就别再这样了

Yes componentWillMount是一个生命周期钩子，在将组件添加到树中时只调用一次

如果我从componentWillUpdate调用它，就会得到一个无限循环

在更新组件之前调用此生命周期挂钩。所以如果你在这里设置你的状态，它会再次调用这个函数，它会形成一个无限循环

我可以通过比较nextStates和not来停止这个循环。。。 但这似乎不是最好的办法

您始终可以进行比较并更新状态。没有什么比这样做更像是错误的方式了

父级状态的更新不会触发渲染。。 包括尝试“强制更新”）

决不能显式调用

render

。这不是一个正确的做法，因为它阻碍了反应的正常流动

我想让你测试一下设置状态

this.setState(() => ({
    value: computedValue
}), () => {
    console.log("working")
    this.props.stateChangeHandler(this);
}
);

---

问题似乎是

（{value:computedValue}）

中的

（）

。试一试。

您发布的函数与您在文本字段true中绑定的函数不同。这是一个只准备好的文本字段，所以onChange永远不会启动。（对吗？）为了清晰起见，我删除了它。您发布的函数与您在文本字段true中绑定的函数不同。这是一个只准备好的文本字段，所以onChange永远不会启动。（对吗？）为了清晰起见，我把它删除了。道具是只读的。。。所以我假设你是说这个组件的“值”应该存储在父组件中，并简单地传递给这个组件。。。这就引出了一个问题，难道不是所有的东西都需要存储在根/父组件中吗。。。其他对等组件将按预期更新它们的状态（通过onChange）。这一个需要根据对等组件中的更改进行更新。如果设计模式必然会在对等组件中更改，也许我应该问一下，您多久调用一次computeValue（）？理想情况下，当它的计算值之一更改时。实际上，每次有人按下一个键时，只需在按键事件处理程序上调用setState（）。工作道具应该是只读的。。。所以我假设你是说这个组件的“值”应该存储在父组件中，并简单地传递给这个组件。。。这就引出了一个问题，难道不是所有的东西都需要存储在根/父组件中吗。。。其他对等组件将按预期更新它们的状态（通过onChange）。此模式需要根据对等组件中的更改进行更新