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>;
    }
};

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

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

Answer 1

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

您需要提升状态并将query作为道具传递给<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>
    )
  }
}

在父级中，为其渲染路线的地方，使用render函数，获取其道具，解析来自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
}

这是一个工作示例。