使用反应路由器时如何在父状态发生变化时刷新组件

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) returns 空数组

Answer 1

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

在 ToCompleteItemsComponent 中，您可以这样做：

componentWillReceiveProps() is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare this.props and nextProps and perform state transitions using this.setState() in this method.

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

正如您在此代码段中看到的那样，console.log 按预期工作。我修改了将内容添加到项目数组的方式。请记住，我从 Route 中删除了 exact 属性，因为在片段中我无法通过 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>

使用反应路由器时如何在父状态发生变化时刷新组件

How to refresh components when parent state changes in react when using react router

reactjs

react-router-dom