javascript - 无法通过 React Route/Link 传递访问道具？

问题描述

我已经使用 React 构建了以下网站，现在我需要根据用户搜索请求 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>
    );
    }
}

这一行：

<Route path="/festivals/textSearch/search=" component={SearchResults}/>

是感兴趣的路线，它应该将写入的文本插入到url中。在这个类是我插入<Link>标签的地方：

class TextSearch extends React.Component{
    constructor(props) { 
        super(props);
        this.state = { textkeysearch : "" };
    }

    handleSearchText(e){
        this.setState({ textkeysearch : e.target.value});
    }

    render() {
    return (
        <div className="mt-3">
            <br/><br/>
            <input id="text-search" type="text" onChange={this.handleSearchText.bind(this)} />
            <Link to={{ pathname: "/festivals/textSearch/search=", state:{textInput : this.state.textkeysearch} }}>
                <a class ="btn btn-info ml-3" id="textSearch" href={"/festivals/textSearch/search=" + this.state.textkeysearch} >Procurar</a><br/>
            </Link>
            <span>*Insira uma palavra-chave - pode ser o nome do evento, o sítio onde irá decorrer, entre outros...</span>
            
        </div>
    );
    }
}

以及应该访问道具的组件：

class SearchResults extends React.Component{
    componentDidMount(){
        const textInput = this.props.match.params    <--------"textInput is declared but never used"
        //TODO axios()
    }
        
    render() {
        return(
            <div>
                <p>IARARARA</p>                       <--------This appears
                <p>{this.textInput}</p>               <--------This does not 
            </div>
        );
    }
}

this关于插入，我已经打了几次头，尝试了一堆组合。尝试使用构造函数，结果相同。

在某些时候，我成功地通过 url 传递了书面文本，但以 SearchPageContent 和 SearchResults 混合在同一页面上结束，并且仍然无法访问道具

标签。也尝试过const {textInput} = this.props.match.params，但结果是相等的。

我还尝试了一些我不记得的东西，但总是得到相同的结果。

我也愿意接受任何可以改进我的代码的建议。我认为我转录的代码已经足够了，但如果不是，我将它放在远程存储库中，如果您想检查它：https ://github.com/reborn12008/HitchHikers-Collab-React-

更新

通过在构造函数方法中创建一个状态，如下所示：

constructor(props){
    super(props);

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

并以相同的方式访问：{this.state.textWritten} 似乎适用于渲染目的。

标签： javascriptreactjs

试试这个

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

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

尝试直接渲染参数

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

或者在 componentDidMount 中设置 state 中的参数并从 state 中渲染它。

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

在你的渲染方法中

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

javascript - 无法通过 React Route/Link 传递访问道具？

问题描述

解决方案

推荐阅读