如何从辅助文件修改反应useState

Question

我是新手，目前正在尝试从另一个文件修改 useState 挂钩。当“Options.tsx”中的一个单选按钮被选中时，结果应该以某种方式使用 useState 挂钩的 setResult 函数进行更新，以便标签得到更新。我想我几乎明白了，但我没有设法将正确的“onSelect”属性传递给 Options.tsx，所以它被更新了。到目前为止，这是我的代码：应用程序.tsximport React from 'react';import './App.css';import { useState } from 'react';import { Result, ResultType } from './Result'import { Options } from './Options'function App() {    const [result, setResult] = useState<ResultType>('pending')    return (        <div className="App">            <header className="App-header">                <Options onSelect={props.onSelect} />                <Result result={result} />            </header>        </div>    );}export default App;选项.tsximport React from 'react'interface Props {    onSelect: (correct: boolean) => void}export const Options = ({onSelect}: Props) => {    // TODO    const setWrong = () => setResult('wrong');    const setCorrect = () => setResult('correct');    return(        <div>            <fieldset>                <input type='radio' id='option1' onSelect={setWrong}/>                <label htmlFor='option1'>Label 1</label>                <input type='radio' id='option2' onSelect={setCorrect}/>                <label htmlFor='option2'>Label 2</label>                <input type='radio' id='option3' onSelect={setCorrect}/>                <label htmlFor='option3'>Label 3</label>            </fieldset>        </div>    )}Result.tsx（只是为了完成 - 到目前为止工作正常）import React from 'react'export type ResultType = 'pending' | 'correct' | 'wrong'interface Props {    result: ResultType}export const Result = ({ result }: Props) => {    switch (result) {        case 'pending':            return <h2>Make a guess</h2>        case 'correct':            return <h2>Yay, good guess!</h2>        case 'wrong':            return <h2>Nope, wrong choice...</h2>    }}知道吗，如何从 Options.tsx 更新 useState？先感谢您！

Answer 1

这非常简单 - 您只需要通过属性将 setter 传播到选项。

<Options setResult={setResult} />

或者，根据情况提供您自己的使用 setResult 的方法。

我会注意到您当前传递给 onSelect 的值似乎绑定到不正确的值。Typescript 编译器可能在抱怨它？

Answer 2

您可以将更新程序功能传递给选项组件：

<Options setResult={setResult} />

然后在您的选项组件中，您可以使用

props.setResult('blah')

Answer 3

只需将setResultprop 传递给 Options 组件即可。

应用程序.tsx：

function App() {

    const [result, setResult] = useState<ResultType>('pending')

    return (

        <div className="App">

            <header className="App-header">

                <Options onSelect={props.onSelect} setResult={setResult} />

                <Result result={result} />

            </header>

        </div>

    );

}

选项.tsx：

export const Options = ({onSelect, setResult}: Props) => {

    const setWrong = () => setResult('wrong');

    const setCorrect = () => setResult('correct');

    ...

}