Javascript 无法通过路由/链路访问道具？

我已经建立了以下网站使用反应，我在一个点上，我需要请求一个API一些基于用户搜索的数据，所以我尝试传递搜索文本有一个道具到新的组件，这将提出请求，并呈现结果，但是，它抱怨我传递的道具被声明，但从未使用过。我大约2/3周前开始学习React，所以我对这里很新鲜，发发慈悲吧：）

本课程是与网站搜索部分相关的主要课程：

class SearchPageContent extends React.Component{
    render() {
    return (
        <div className="container">
            <a className="btn btn-primary" style={{ marginRight:"10px" }} href="/festivals/categorySearch" > Pesquisar por categoria </a>
            <a className="btn btn-primary" href="/festivals/textSearch"> Pesquisar por palavras-chave </a>
            <Switch>
                <Route exact path="/festivals/categorySearch" component={CategorySearch}/>
                <Route exact path="/festivals/textSearch" component={TextSearch}/>
                <Route path="/festivals/textSearch/search=" component={SearchResults}/>
            </Switch>        
            <br/><br/>
        </div>
    );
    }
}

并以相同的方式访问：

{this.state.textWrited}

似乎可以用于渲染目的。

试试这个

const paramsString = this.props.location.search;
const params = new URLSearchParams(paramsString);
const foo = params.get('foo');

首先，您无法访问在任何其他函数（包括componentDidMount）中声明的render方法中的变量，第二个render方法将在调用componentDidMount之前调用一次，因此您需要在渲染方法中验证该变量

尝试直接渲染参数

render() {
  return (<p>{this.props.location.params}</p>) 
}

在渲染方法中

render() {
  return (
   <div>{this.state.params && <p>{this.state.params}</p>}</div>
   ) 
}

render（）{
返回(
{this.state.params&&{this.state.params}
}
) 
}

您没有在searchResults组件中获得

this.props.match.params的值这是正确的问题吗？
textInput
是
组件didmount
范围内的常量，它不是类属性。用
this.textInput
引用它是没有意义的。@Brian Thompson是的，但我写这个范围是为了请求API，这是我想达到的主要目的。@pageNotfoUnd Yes这就是问题所在您可以在componentDidMount之外声明
const textInput=this.props.match.params
，然后检查我无法使它像那样正常工作，但它使用jut
const{textInput}=this.props.location.state
它会捕获到该道具，但是在componentDidMount之外，const是不可访问的i get
错误：对象作为React子对象无效（找到：具有键{textInput}的对象）。如果您打算呈现一个子集合，请改用数组。
当直接呈现它时，或者当我在componentDidMount（）中设置state时，或者甚至删除此函数并在构造函数中执行它时。我现在设法使用state而没有出现错误，但现在它说
this.props.location.state
等于
[对象对象]
constructor(props){
    super(props);

    this.state ={
        textWritten : this.props.location.state.textInput,
    }
}

const paramsString = this.props.location.search;
const params = new URLSearchParams(paramsString);
const foo = params.get('foo');

render() {
  return (<p>{this.props.location.params}</p>) 
}

componentDidMount() {
  this.setState({
    params: this.props.location.params
  })
}

render() {
  return (
   <div>{this.state.params && <p>{this.state.params}</p>}</div>
   ) 
}