从同一组件中的match.params设置状态

Question

我上课了。

class App extends Component { }

在此类中，我有一个具有以下内容的构造函数：

  constructor(props) {
      super(props);
      this.state = {number: null, id: ""};
  }

在渲染器中，我有一个路由器...

<Router>
   <Route path="/:id" component={Child}/>
</Router>

在组件之外，我还具有以下功能

function Child({ match }) {
  return (
    <div>
      <h3>ID: {match.params.id}</h3>
    </div>
  );
}

如果我的URL是localhost：3030/12345，它将打印12345。但是，我希望能够在该状态下存储12345。

已更新：

它正确设置了道具，但随后又对其进行了两次调用，然后失败，TypeError: Cannot read property 'params' of undefined

<Router>
    <Route exact path="/:num" component={ServerCall}/>
</Router>

在ServerCall内

class ServerCall extends Component {

  constructor(props) {
      super(props);
      console.log(this.props);
      this.state = {num: this.props.match.params.num};
    }

  render() {
    return (
            <div>
                {this.state.num}
            </div>
    );
  }
}


export default ServerCall;

这是怎么回事？

Answer 1

“ 我希望能够在状态下存储12345 ”-那么您将无法使用SFC（无状态功能组件）。将您的Child更改为一个类，初始化state并设置一个字段，例如id将保留来自道具的价值。

class Child extends React.Component {
   state = {
      id: this.props.match.params.id,
   }

   render() {
      return (
         <div>
            <h3>ID: {this.state.id}</h3>
         </div>
      );
   }
}

如果您初始化了react-router-redux中间件和化简器，则道具中应该有一个location字段。从那里您可以轻松获得id。但是，如果您尚未执行此操作，则只需使用window.location对象来确定url。

更简便的方法：

class Child extends React.Component {
   state = {
      id: '',
   }

   componentDidMount() {
      const id = window.location.pathname; // u can use regex or whatever to get just the id

      this.setState({ id });
   }

   render() {
      return (
         <div>
            <h3>ID: {this.state.id}</h3>
         </div>
      );
   }
}

请注意，window对象必须位于componentDidMount内，而不是构造函数内，因为如果将来您想实现SSR（服务器端渲染），则无法访问服务器端的window对象。仅在客户端。 componentDidMount仅发生在客户端。