javascript - 当全局变量发生变化时如何设置组件的状态？

Question

我的应用程序组件有 2 个子组件，其中一个有一个 onClick，它将 props 传递给另一个函数，其中全局变量被更改。我需要另一个子组件在该变量发生更改时将 State 设置为该变量的值。

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 可以做到这一点吗？或者有更好的方法吗？

Answer 1

是的，如果您传递 setter，例如 setIntervalArray 作为您在子组件中使用的 prop 来更改状态，则可以使用 useState 。

当有多个子级(和嵌套级别)时，请考虑使用 React Context