React组件传递props显示undefined问题求助

你遇到的核心问题是：跳转后渲染的SecondComponent没有接收到你想要传递的props。你在<Link>标签里渲染的<SecondComponent name={this.state.fields} />只是在当前页面额外渲染了一个组件，并非跳转后展示的实例；真正跳转后渲染的是<Route>中的<SecondComponent/>，这里没有传递任何props，所以this.props.name返回undefined。

解决方法1：直接给Route中的组件传递props #

修改Home组件的render部分：

1. 移除<Link>内的<SecondComponent>，让Link仅负责跳转逻辑：

<Link to='/second_component'>Submit</Link>

2. 在<Route>的element属性中，把state的fields作为props传递给SecondComponent：

<Routes>
  <Route path='/second_component' element={<SecondComponent name={this.state.fields} />} />
</Routes>

修改后，跳转进入/second_component时，SecondComponent就能通过this.props.name拿到包含输入值的对象。

解决方法2：通过Link传递state（适合跨页面数据传递） #

如果你的路由对应不同页面，更推荐用Link的state属性传递数据：

1. 修改Link的to属性，携带state数据：

<Link to={{ pathname: '/second_component', state: { fields: this.state.fields } }}>Submit</Link>

2. 调整SecondComponent为函数组件（React Router v6对类组件的路由支持有限，函数组件更简洁），用useLocation钩子获取state：

import { useLocation } from 'react-router-dom';

function SecondComponent() {
  const location = useLocation();
  const fields = location.state?.fields; // 可选链避免state为空时报错
  return (
    <div style={{color: "white"}}>
      {console.log(fields)}        
    </div>
  )
}

额外优化：简化state更新逻辑 #

你当前的updateField方法可以用展开运算符简化，代码更直观：

updateField = evt => {
  this.setState(prevState => ({
    fields: {
      ...prevState.fields,
      [evt.target.name]: evt.target.value
    }
  }));
}

内容的提问来源于stack exchange，提问作者user19652801