React 上下文神奇地改变其他状态

Question

谁能解释一下这个东西？为什么当我修改上下文时其他状态会神奇地改变值？ title 这里在我更改 someState 时被修改，即使这 2 个值根本不会相互影响

const LapContext = React.createContext();

function Btn(arg){
    
    return <div onClick={arg.click} className="btn" style={{display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "15px", width: "275px", height: "6em", outline: "1px solid orange"}}>
                <p style={{color:"rgb(255,165,0)", fontSize: "2em"}}>{arg.val}</p>
            </div>
    
}

function Control(arg){
    
    let [someState, setSomeState] = React.useContext(LapContext);
    
    function setTitle(){
        
        arg.setter("asdasd");
        
    }
    
    function changeSomeState(){
        
        setSomeState(["a"]);
        
    }

    return  <div>
                <Btn val={"Button1"} click={setTitle}/>
                <Btn val={"Button2"} click={changeSomeState}/>
            </div>
    
}

function Main(arg){
    
    {/*this state is modified for no reason*/}
    let [title, setTitle] = React.useState("default");

    return <div>

            <p style={{fontSize: "3em", color: "yellow"}}>{title}</p>
            <Control setter={setTitle}/>

    </div>
    
}

function Page(){
    
    {/*this state is shared with context*/}
    let [someState, setSomeState] = React.useState(["some value"]);
    
    return <LapContext.Provider value={[someState, setSomeState]}> 
    <Main key={uuid.v4()}/>
    </LapContext.Provider>
            
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Page/>);

Answer 1

你的代码有很多问题，例如，你不应该像那样传递命令式 API，应该依赖 props/onChange 回调 API，它更反应方式。查看有关组件应如何交互的 React 文档：

https://reactjs.org/docs/components-and-props.html

但是如果你只是想得到问题的答案，那么问题就在这里：

<Main key={uuid.v4()}/>

您在每个 re-render 上生成一个唯一的 key。这将导致 React 将整个组件识别为它的兄弟组件中的“新”组件，un-mount 它，并从头开始安装它。这会导致您的状态“重置”为默认状态。

“key”通常用在List-like组件中，这里不需要。只需删除它，状态就会恢复到“正常”行为。

React 上下文神奇地改变其他状态

React context magically change other state

reactjs

jsx