React值交换功能正常但第二个输入框初始值未设置如何解决？

AI 小北

2026-10-6

问题根因

你的代码存在属性名大小写不匹配的错误：

App组件给Content组件传参时用的属性名是lastName（N为大写）
Content组件解构props时写的是lastname（n为小写）

二者命名不一致导致解构出来的lastname为undefined，所以第二个输入框没有初始值，你的交换功能逻辑本身没有问题。

修复方案

只需要将Content组件的props解构语句调整为和传参属性名完全一致即可，修改后的完整代码如下：

import React, { useState } from "react";
import "./App.css";

function Content(props) {
  // 修正lastname的大小写为lastName，和传参属性名匹配
  const { firstName, lastName } = props;
  const [text1, setText1] = useState(firstName);
  const [text2, setText2] = useState(lastName);

  return (
    <div className="content">
      <input
        type="text"
        onChange={function (event) {
          setText1(event.target.value);
        }}
        value={text1}
      />

      <input
        type="text"
        onChange={function (event) {
          setText2(event.target.value);
        }}
        value={text2}
      />

      <button
        onClick={function () {
          setText1(text2);
          setText2(text1);
        }}
      >
        SWAP
      </button>
    </div>
  );
}

function App() {
  return <Content firstName={"First Name"} lastName={"Last Name"} />;
}

export default App;