Javascript 反应-如何在搜索时重定向到另一个组件？

所以我正在为学校开发一个应用程序，我已经被一个问题困扰了大约两天。我正在构建一个从TMDB获取数据的搜索，所有这些都可以正常工作。当我输入时，所有的数据都流入了！但是，当我提交并尝试重定向到/results页面时，该页面链接到一个组件，该组件在定向到该组件时显示搜索结果，但什么也没有发生，它会保留在主页上。。。我尝试重定向，但要么我使用不正确，要么我不应该在这种情况下使用它。这是我的搜索组件的代码，如果您能帮助我，我将不胜感激！：

import React, { Component, Redirect } from 'react';
import axios from 'axios';

class Search extends Component {
  state = {
    query: '',
    results: []
  };

  getInfo = () => {
    axios
      .get(
        `https://api.themoviedb.org/3/search/tv?api_key=6d9a91a4158b0a021d546ccd83d3f52e&language=en-US&query=${
          this.state.query
        }&page=1`
      )
      .then(({ data }) => {
        this.setState({
          results: data
        });
      });
  };

  handleInputChange = e => {
    e.preventDefault();
    this.setState(
      {
        query: this.search.value
      },
      () => {
        if (this.state.query && this.state.query.length > 1) {
          if (this.state.query.length % 2 === 0) {
            this.getInfo();
          }
        } else if (!this.state.query) {
        }
      }
    );
  };

  render() {
    return (
      <div>
        <form>
          <input
            className='search'
            placeholder='⌕'
            type='text'
            ref={input => (this.search = input)}
            onChange={this.handleInputChange}
          />
        </form>
        {this.state.results.length > 0 && (
          <Redirect
            to={{
              pathname: '/results',
              state: { results: this.state.results }
            }}
          />
        )}
      </div>
    );
  }
}

export default Search;

import-React，{Component，Redirect}来自'React'；
从“axios”导入axios；
类搜索扩展组件{
状态={
查询：“”，
结果：[]
};
getInfo=（）=>{
axios
.得到(
`https://api.themoviedb.org/3/search/tv?api_key=6d9a91a4158b0a021d546ccd83d3f52e&language=en-美国&查询=${
this.state.query
}&页码=1`
)
。然后（{data}）=>{
这是我的国家({
结果：数据
});
});
};
handleInputChange=e=>{
e、 预防默认值（）；
这是我的国家(
{
查询：this.search.value
},
() => {
if（this.state.query&&this.state.query.length>1）{
if（this.state.query.length%2==0）{
这个.getInfo（）；
}
}else if（！this.state.query）{
}
}
);
};
render（）{
返回(
（this.search=input）}
onChange={this.handleInputChange}
/>
{this.state.results.length>0&&(
)}
);
}
}
导出默认搜索；

您是否使用React路由器进行路由？。您需要更改您的URL吗？这样的东西没什么必要。将某人发送到

/results

只是老生常谈，除非你打算做类似

/results？q=plup&；piction

以便有人可以刷新或直接链接到结果

对于类似的内容，只需显示结果组件

{this.state.results.length && (
  <SearchResults results={this.state.results} />
)}

{this.state.results.length&&(
)}

---

如果您正在使用路由器，并且需要使用学校项目的路径，请向您的老师咨询愚蠢的业务需求，并向我们提供有关您正在使用的路由器的更多信息。

您可以使用

withRouter

注入历史道具，然后执行：

历史。推送（“/results”）

代码将如下所示：

import React, { Component, Redirect } from 'react';
import axios from 'axios';
import { withRouter } from "react-router";

class Search extends Component {
  state = {
    query: '',
    results: []
  };

  componentDidUpdate(prevProps, prevState) {
  const { history } = this.props;
  if (prevState.results !== this.state.results) {
    history.push('/results');
  }
  }

  getInfo = () => {
    axios
      .get(
        `https://api.themoviedb.org/3/search/tv?api_key=6d9a91a4158b0a021d546ccd83d3f52e&language=en-US&query=${
          this.state.query
        }&page=1`
      )
      .then(({ data }) => {
        this.setState({
          results: data
        });
      });
  };

  handleInputChange = e => {
    e.preventDefault();
    this.setState(
      {
        query: this.search.value
      },
      () => {
        if (this.state.query && this.state.query.length > 1) {
          if (this.state.query.length % 2 === 0) {
            this.getInfo();
          }
        } else if (!this.state.query) {
        }
      }
    );
  };

  render() {
    return (
      <div>
        <form>
          <input
            className='search'
            placeholder='⌕'
            type='text'
            ref={input => (this.search = input)}
            onChange={this.handleInputChange}
          />
        </form>
      </div>
    );
  }
}

export default withRouter(Search);

import-React，{Component，Redirect}来自'React'；
从“axios”导入axios；
从“react router”导入{withRouter}；
类搜索扩展组件{
状态={
查询：“”，
结果：[]
};
componentDidUpdate（prevProps、prevState）{
const{history}=this.props；
if（prevState.results！==this.state.results）{
history.push（'/results'）；
}
}
getInfo=（）=>{
axios
.得到(
`https://api.themoviedb.org/3/search/tv?api_key=6d9a91a4158b0a021d546ccd83d3f52e&language=en-美国&查询=${
this.state.query
}&页码=1`
)
。然后（{data}）=>{
这是我的国家({
结果：数据
});
});
};
handleInputChange=e=>{
e、 预防默认值（）；
这是我的国家(
{
查询：this.search.value
},
() => {
if（this.state.query&&this.state.query.length>1）{
if（this.state.query.length%2==0）{
这个.getInfo（）；
}
}else if（！this.state.query）{
}
}
);
};
render（）{
返回(
（this.search=input）}
onChange={this.handleInputChange}
/>
);
}
}
使用路由器导出默认值（搜索）；

通过这种方式，您可以使用react路由器历史记录中的push方法以编程方式进行导航

在这里，您可以阅读有关withRouter HOC的更多信息：

“重定向”组件位于“react router dom”包中。 使用这种方法：

import { Redirect } from "react-router-dom";
import React, { Component } from 'react';

class Search extends Component {
//...

render() {

    const { results } = this.state
    const { props } = this.props

    return (results.length > 0 ? <Redirect
        to={{
            pathname: "/results",
            state: {
                results: results,
                from: props.location
            }
        }}
    /> : <form>
            <input
                className='search'
                placeholder='⌕'
                type='text'
                ref={input => (this.search = input)}
                onChange={this.handleInputChange}
            />
        </form>
    )
}

从“react router dom”导入{Redirect}；
从“React”导入React，{Component}；
类搜索扩展组件{
//...
render（）{
const{results}=this.state
const{props}=this.props
返回（results.length>0？：
（this.search=input）}
onChange={this.handleInputChange}
/>
)
}

---

}

AFAIK

反应。重定向不存在。我将尝试您的解决方案。我不需要路径，只是被告知使用它lol。因此，正在进入SearchResults的信息只是显示在搜索字段下，而不是将Home组件切换到SearchResults组件（出于某种原因，这种方法对我也不起作用。也许这是我安装应用程序的方式……我必须向某人展示Github repo，看看他们是否能找到任何错误。这很奇怪haha@JavontayMcelroy你说的不工作是什么意思？给我看一个控制台错误或告诉我发生了什么。我们错过了一些东西，我想是“技术”ally“它正在工作，没有记录任何错误，但是，/results没有被推到url的末尾。它确实从localhost:3000转到localhost:3000/？，每当我点击enter…@JavontayMcelroy，你在该视图中有任何按钮吗？尝试添加道具type='button'伙计，你太棒了！！谢谢！！上帝，我从来没有想到没有把帽子拿出来！谢谢！