Question

我看到了post，但不知道如何申请。基本上我有3-4个输入范围栏，如果用户更改任何滑块，其他2/3滑块会自动更改。我从后端得到的初始值。之后我将初始值添加到我的州。为此我写了这样的代码

我的父组件

 constructor(props){
       super(props);
       this.state ={
           objectiveData:[]
       }
        var {objectiveData} = this.state;
        this.props.objective_value.map((data,index) =>{

             var newObj ={};
            newObj['url'] = data.url;
            newObj['name'] = data.name;
            newObj['value'] = data.value;
            newObj['pk'] = data.pk;
            objectiveData[index] = newObj;
        })
        console.log("lcal",objectiveData)
        this.setState({objectiveData});
}
updateValue = (obj) =>{
        var {objectiveData} = this.state;
       var selectedData = objectiveData.filter((data) => data.pk === obj.pk);

        var diff=obj.value - selectedData[0].value;

        var otherData = objectiveData.filter((data) => data.pk !== obj.pk);

        var sum = otherData.map((data) =>( data.value)).reduce((a,b) => a + b,0);
        console.log("sum",sum);
        if(diff > 0){
            for(var i=0;i < objectiveData.length;i++){
                if(objectiveData[i].pk !== obj.pk){
                    console.log("object before value",objectiveData[i].value)
                    objectiveData[i].value = objectiveData[i].value - (objectiveData[i].value/sum);
                    console.log("object after value",objectiveData[i].value)
                }else{
                    objectiveData[i].value = obj.value;
                }
            }
        }else if(diff <0){
            for(var i=0;i < objectiveData.length;i++){
                if(objectiveData[i].pk !== obj.pk){
                    console.log("object before value plus",objectiveData[i].value)
                    objectiveData[i].value = objectiveData[i].value + (objectiveData[i].value/sum);
                    console.log("object before value minus",objectiveData[i].value)
                }else{
                    objectiveData[i].value = obj.value;
                }
            }
        }
       return this.setState({objectiveData});
}

 <MyInputRange maxValue={1} minValue={0} step={0.01} 
               updateProgramObjectiveValue={(value) => this.props.updateProgramObjectiveValue(value)}
               value={data.value} objective_name={data.objective_name} 
            value_type={data.value_type} url={data.url} pk={data.pk}
            updateValueLocally={this.updateValue.bind(this)}/>

这是我的孩子组件

updateObjectiveValues = (value) =>{
this.props.updateValueLocally({"value":value,"pk":this.props.pk})
  }

    render(){

        return(
             <InputRange
                    maxValue={this.props.maxValue}
                    minValue={this.props.minValue}
                    step={this.props.step}
                    value={this.state.value}
                    onChange={this.updateObjectiveValues.bind(this)}

                   />
        )
    }

但即使滑块用户移动，我的滑块也没有移动任何地方。所以请告诉我应该如何回应重新渲染我的组件？每当setState调用时，应该重新进行反应。我在这里弄坏了什么？编辑1：基于克里斯的答案，我这样添加了

 this.setState({objectiveData});
        this.forceUpdate();

但没有运气..我错过了什么？

Answer 1

通常这类问题就是为什么像Redux这样的工具可以巩固组件之间的统一状态，这样不仅仅是组件中的DOM，而且组件本身都会对状态变化做出反应。如果没有这样做......你需要自己设置自定义事件并触发另一个组件应该监听的事件以响应事件。

要创建和触发事件，请查看... https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

您也可以使用forceUpdate强制更新组件。

component.forceUpdate(callback)

默认情况下，当您的组件的状态或道具发生变化时，您的   组件将重新渲染。如果你的render（）方法依赖于某些方法   其他数据，你可以告诉React组件需要重新渲染   通过调用forceUpdate（）。

调用forceUpdate（）将导致调用render（）   组件，跳过shouldComponentUpdate（）。这将触发   子组件的正常生命周期方法，包括   每个子节点的shouldComponentUpdate（）方法。 React仍然只会   如果标记发生更改，则更新DOM。

通常你应该尽量避免使用forceUpdate（）   在this（）中读取this.props和this.state。

https://facebook.github.io/react/docs/react-component.html#forceupdate

如何通过其他组件在状态更改上重新呈现DOM

1 个答案: