Reactjs React TS-无法在if语句中返回正确的组件

我有一个函数，它在if语句中返回react内容（JSX.Element）。但它似乎不起作用。我只得到要触发的第一个语句

我用一个简单的例子重新创建了codesandbox的问题。要测试这一点，只需按住按钮并查看console.log。查看rndType是否已更改。在这种情况下，它应该显示另一个标题，但它没有

export default function App() {
  const [number, setNumber] = useState({ rnd: 100 });
  const [name, setName] = useState({ rnd: "Name" });

  const type = ["Number", "Text"];

  const getContent = () => {
    let rndNo = Math.floor(Math.random() * type.length);
    let rndType = type[rndNo];
    console.log("rndType", rndType);

    if (rndType === "Number") {
      return (
        <>
          <h1>{number.rnd}</h1>
        </>
      );
    } else {
      return (
        <>
          <h1>{name.rnd}</h1>
        </>
      );
    }
  };

  return (
    <div className="App">
      {getContent()}

      <button onClick={() => getContent()}>Click Me!</button>
    </div>
  );
}

导出默认函数App（）{
const[number，setNumber]=useState（{rnd:100}）；
const[name，setName]=useState（{rnd:“name”}）；
常量类型=[“数字”，“文本”]；
const getContent=（）=>{
设rndNo=Math.floor（Math.random（）*type.length）；
设rndType=type[rndNo]；
log（“rndType”，rndType）；
如果（rndType==“数字”）{
返回(
{number.rnd}
);
}否则{
返回(
{name.rnd}
);
}
};
返回(
{getContent（）}
getContent（）}>单击我！
);
}

---

组件只会在状态更新时重新加载，而您不会更新任何组件。您可以将所选类型存储在一个状态中，然后它将按预期工作：

export default function App() {
  const [number, setNumber] = useState({ rnd: 100 });
  const [name, setName] = useState({ rnd: "Name" });
  const [type, setType] = useState("Text");

  const types = ["Number", "Text"];

  const getContent = () => {
    const content = type === "Number" ? number.rnd : name.rnd
    return <h1>{content}</h1>
  };

  const setRandomType = () => {
    let rndNo = Math.floor(Math.random() * types.length);
    let rndType = types[rndNo];
    setType(rndType);
  }

  return (
    <div className="App">
      {getContent()}

      <button onClick={setRandomType}>Click Me!</button>
    </div>
  );
}

导出默认函数App（）{
const[number，setNumber]=useState（{rnd:100}）；
const[name，setName]=useState（{rnd:“name”}）；
const[type，setType]=useState（“文本”）；
常量类型=[“数字”，“文本”]；
const getContent=（）=>{
const content=type==“Number”？Number.rnd:name.rnd
返回{content}
};
常量setRandomType=（）=>{
设rndNo=Math.floor（Math.random（）*types.length）；
设rndType=types[rndNo]；
setType（rndType）；
}
返回(
{getContent（）}
点击我！
);
}

组件只会在状态更新时重新加载，您不会更新任何组件。您可以将所选类型存储在一个状态中，然后它将按预期工作：

export default function App() {
  const [number, setNumber] = useState({ rnd: 100 });
  const [name, setName] = useState({ rnd: "Name" });
  const [type, setType] = useState("Text");

  const types = ["Number", "Text"];

  const getContent = () => {
    const content = type === "Number" ? number.rnd : name.rnd
    return <h1>{content}</h1>
  };

  const setRandomType = () => {
    let rndNo = Math.floor(Math.random() * types.length);
    let rndType = types[rndNo];
    setType(rndType);
  }

  return (
    <div className="App">
      {getContent()}

      <button onClick={setRandomType}>Click Me!</button>
    </div>
  );
}

导出默认函数App（）{
const[number，setNumber]=useState（{rnd:100}）；
const[name，setName]=useState（{rnd:“name”}）；
const[type，setType]=useState（“文本”）；
常量类型=[“数字”，“文本”]；
const getContent=（）=>{
const content=type==“Number”？Number.rnd:name.rnd
返回{content}
};
常量setRandomType=（）=>{
设rndNo=Math.floor（Math.random（）*types.length）；
设rndType=types[rndNo]；
setType（rndType）；
}
返回(
{getContent（）}
点击我！
);
}

我还对

getContent

进行了一点重构，以保持它的整洁。fwiw您也可以只返回

content

，在返回语句do

{getContent（）}

中，我还对

getContent

进行了一点重构，以保持它更干净。fwiw您也可以只返回

内容

，在返回语句do

{getContent（）}