使用react路由器时如何在react中父状态更改时刷新组件

Question

我有一个名为App 的父组件。它保存状态和改变状态的形式。

我删除了不重要的代码。当我在表单中输入内容时，state.item 中添加了一个对象项，但ToCompleteItemsComponent 没有更新。有没有办法在状态更改时更新该组件

class App extends Component {
  state = {
    items: []
  }
    submitItem=(e)=> {
      e.preventDefault();
      let items = this.state.items;
      items.push({
        name: this.state.ValuePlaceholder,
        completed: false
      });
      this.setState({
        items

      });
    }

  render() {

    return (<BrowserRouter>
      <div className="wrap">
        ...
       <form onSubmit={this.submitItem}>
          <input type="text" />
        </form>
            <Route exact path="/"
                render={props => <ToCompleteItemsComponent 
                 items={this.state.items} /> }
                />
          </div>
        </BrowserRouter>
    );

  }
}

编辑这是组件

class ToCompleteItemsComponent extends Component {
componentWillReceiveProps(nextProps) {
// check this.props vs nextProps and setState!
// do whatever you want.
  console.log(nextProps)
}
render(){
  return(<div>
  <ul className="items">
  {
    this.props.items.map( (item,id)=> <li key={id}>{item.name} <span>x</span></li>)
  }
  </ul>
  </div>)
}
}
export default ToCompleteItemsComponent;

console.log(nextProps) 返回一个空数组

Answer 1

当父状态更新时你可以使用：componentWillReceiveProps

在 ToCompleteItemsComponent 中，您可以这样做：

componentWillReceiveProps() 在挂载组件之前调用 收到新道具。如果您需要更新状态以响应 prop 更改（例如，重置它），您可以比较 this.props 和 nextProps 并使用 this.setState() 执行状态转换 这个方法。

componentWillReceiveProps(nextProps) {
  // check this.props vs nextProps and setState!
  // do whatever you want.
}

正如您在这个 sn-p 中看到的，console.log 可以按预期工作。我重新设计了将内容添加到 items 数组的方式。请记住，我从 Route 中删除了 exact 属性，因为在 sn-ps 中我无法通过 BrowserRouter 正确使用 Routes。

class App extends React.Component {
  state = {
    items: []
  }
    submitItem=(e)=> {
      e.preventDefault();
      this.setState({
        items: this.state.items.concat([{
          name: this.state.ValuePlaceholder,
          completed: false
        }])
      });
    }

  render() {
    return (<ReactRouterDOM.BrowserRouter>
      <div className="wrap">
       <form onSubmit={this.submitItem}>
          <input type="text" />
          <button type="submit">submit</button>
        </form>
            <ReactRouterDOM.Route path="/"
                render={props => <ToCompleteItemsComponent 
                 items={this.state.items} /> }
                />
      </div>
      </ReactRouterDOM.BrowserRouter>
    );

  }
}

class ToCompleteItemsComponent extends React.Component {
  componentWillReceiveProps(nextProps) {
  // check this.props vs nextProps and setState!
  // do whatever you want.
    console.log("HALO", this.props, nextProps)
  }
  
  render(){
    return(
    <div>
      <ul className="items">
      {
        this.props.items.map( (item,id)=> <li key={id}>{item.name} <span>x</span></li>)
      }
      </ul>
    </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/react-router/umd/react-router.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>

<div id="root"></div>