Question

我已经使用React构建了以下网站，当时我需要根据用户搜索向API请求一些数据，因此我尝试将搜索文本传递给新组件以支持请求并呈现结果，但是，它抱怨我通过的道具被声明但从未使用过。 Ive大约在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，但仍然无法访问

标记上的prop。也尝试了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} 似乎可以用于渲染。

Answer 1

尝试一下

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

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

尝试直接渲染参数

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

或在componentDidMount中将state设置为state并从state进行渲染。

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

然后在您的渲染方法中

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

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

1 个答案: