Question

我的应用程序组件有2个子组件，其中一个子组件具有一个onClick，该onClick将道具传递给另一个函数，在该函数中更改了全局变量。每当更改它时，我都需要另一个子组件将setState设置为该变量的值。

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

是的，如果您将useState传递给setIntervalArray作为道具，则可以在子组件中使用它来更改状态。{p>

如果有多个子级（以及嵌套级别），请考虑使用React Context

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

1 个答案: