ReactJS 组件不会重新渲染

Question

我有以下示例简单页面：

App.js：

export default class App extends React.Component {
    render() {
        return <Router>
            <Switch>
                <Route exact path='/' component={ArticlesPage}/>
                <Route path='/search' component={SearchPage}/>
            </Switch>
        </Router>
    };
};

ArticlesPage.js：

export default class ArticlesPage extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <Grid>
            <Row>
                <Col lg={12}>
                    <SearchBox/>
                </Col>
            </Row>
            <Row>
                <Col lg={12}>
                    articles
                </Col>
            </Row>
        </Grid>;
    }
};

SearchPage.js：

export default class SearchPage extends React.Component {
    constructor(props) {
        super(props);
        const {q} = queryString.parse(location.search);
        this.state = {
            query: q
        };
    }

    render() {
        return <Grid>
            <Row>
                <Col lg={12}>
                    <SearchBox/>
                </Col>
            </Row>
            <Row>
                <Col lg={12}>
                    search {this.state.query}
                </Col>
            </Row>
        </Grid>;
    }
};

SearchBox.js：

export default class SearchBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            q: ''
        };
    }

    onFormSubmit = (e) => {
        e.preventDefault();
        const {router} = this.context;
        router.history.push('/search?q=' + this.state.q);
    };

    handleChange = (e) => {
        this.setState({q: e.target.value});
    };

    render() {
        return <form onSubmit={this.onFormSubmit}>
            <Col lg={10} lgOffset={1}>
                <FormGroup>
                    <input type="text" name="q" id="q" ref={i => this.searchInput = i} onChange={this.handleChange} />
                </FormGroup>
            </Col>
        </form>;
    }
};

现在，当我在索引页面上并在输入下一个发送表单中输入一些内容时，React 渲染 SearchPage.js 并正确返回文本 search *and what I typed*，再次尝试在输入和发送表单中输入其他内容，然后React 仍然显示我以前的文本（不重新渲染）。

这个简单的页面有什么问题？

Answer 1

您有两个不同的状态变量，<SearchPage /> 上的 query 和 <SearchBox /> 上的 q。您要更改的是q，但您要呈现为文本的变量是query。

您需要 lift state up 并将 query 作为 prop 传递给 <SearchPage />。

Answer 2

这就是SearchPage 上的文本不更新的原因：构造函数运行一次 并更新状态中的变量，但是当应用重新渲染时，想要提高效率的 React 看到它将在与前一个相同的位置重新渲染一个新的SearchPage，因此它不会替换它，而是保持旧的状态。因此，SearchPage 的状态仍然保留旧的 q 变量。

解决方法如下：让您的 SearchPage 接受搜索查询作为道具，并呈现它。

class SearchPage extends React.Component {
  render() {
    return (
      <Grid>
        <Row>
          <Col lg={12}>
            <SearchBox />
          </Col>
        </Row>
        <Row>
          <Col lg={12}>search {this.props.query}</Col>
        </Row>
      </Grid>
    )
  }
}

在渲染它的路由的父级中，使用渲染函数，获取它的道具，解析来自props.location.search的实际查询，并将其直接传递给SearchPage。

<Route
  path="/search"
  render={props => <SearchPage query={getSearchQuery(props.location.search)} />}
/>

// utility function to keep things clean
function getSearchQuery(locationSearch) {
  return queryString.parse(locationSearch.slice(1)).q
}

Here's a working demo.