全局变量更改时如何设置组件的状态？答案

【问题标题】：How to set state of a component when a global variable changes?全局变量更改时如何设置组件的状态？
【发布时间】：2020-08-09 22:17:53
【问题描述】：

我的应用组件有 2 个子组件，其中一个有一个 onClick，它将 props 传递给另一个函数，其中一个全局变量被更改。每当它被改变时，我需要另一个子组件将它设置为这个变量的值。

function ChordButton(props) {
    return(
        <p onClick={() => {createChordInversion(props.intervals, selectedInversion)}>
         {props.chordName}</p>
    )
}

function createChordInversion(intervals, a){
    newArr = [...intervals]
    for(var i = 0; i < a; i++){
        newArr[i]= newArr[i] + 12;
    }
    newArr.sort((a, b) => a - b);
    // need newArr to be observed by Keys at this point
    var chordInversion = newArr.map(x => x - (newArr[0] - 1))
    playChord(chordInversion);
}


function Keys(){
    const [intervalArray, setIntervalArray] = useState([0])
    // setIntervalArray(newArr) this causes infinite renders
    return(...

useState 可以做到这一点还是有更好的方法来做到这一点？

【问题讨论】：

标签： javascript java reactjs

【解决方案1】：

是的，useState 可以通过设置器传递，例如 setIntervalArray 作为您在子组件中用于更改状态的道具。

当有多个子级（和嵌套级别）时，考虑使用React Context

【讨论】：