Question

我在更新孩子组件方面遇到困难。

所以，我在渲染器中有这个

render() {
let displaySearchCrypto; 
  var CryptoData = this.props.cryptoLoaded; 
  let i=0;
  let displayCrypto = CryptoData.map(el => {
    return (<CoinCard
       no={i++}
       key={el["short"]}
       coinShortName = {el["short"]}
       coinName = {el["long"]}
       coinPrice = {el["price"].toFixed(2)}
       marketCap = {(el["mktcap"]/1000000000).toFixed(4)}
       percentChange = {el["perc"].toFixed(2)}
       vwapData={el["vwapData"].toFixed(2)}
      />
    )
  })

将内容传递给我在其中添加样式的子组件

  return (

           <ScrollView>
             <Header />
             {/* Custom Search Input */}
             <TextInput
              style={textInput}
              placeholder="Search Coin"
              onChangeText={(text) => this.onSearch(text)} />
            {!this.state.searchCoin ?   displayCrypto   : displaySearchCrypto }
           </ScrollView>
       )

在上面的返回表达式中，this.state.searchCoin具有布尔值

此外，我在其中制作了一个onChangeText={(text) => this.onSearch(text)} ，它应显示所有搜索到的相关加密货币

onSearch = (text) => {
    if (!this.props.cryptoLoading) {
        this.setState({searchCoin: true})
        let updateCoinData = [...this.props.cryptoLoaded];
        for (let i=0; i<updateCoinData.length; i++) {
          let coinVal = updateCoinData[i]["long"] + updateCoinData[i]["short"]
          if (coinVal.indexOf(text) > - 1) {
              displaySearchCrypto = (<CoinCard 
                no={i}
                key={updateCoinData[i]["short"]}
                coinShortName = {updateCoinData[i]["short"]}
                coinName = {updateCoinData[i]["long"]}
                coinPrice = {updateCoinData[i]["price"].toFixed(2)}
                marketCap = {(updateCoinData[i]["mktcap"]/1000000000).toFixed(4)}
                percentChange = {updateCoinData[i]["perc"].toFixed(2)}
                vwapData={updateCoinData[i]["vwapData"].toFixed(2)}    /> ) } } }

但是很遗憾，它没有更新/在视图中显示任何内容。谁能告诉我在这里我可能做错了什么？

[更新：]：我可能忘了提及，我得到了我需要显示的所有组件，因此代码行在displaySearchCrypto = (<CoinCard之前可以正常工作，因此存在一些问题我传递数据的方式。

在渲染中，我正在映射的数据来自此URL（http://coincap.io/front）

Answer 1

我不确定“ displaySearchCrypto”的级别是什么，但是显然它不在类级别。首先，将“ onSearch”功能更改为此：

onSearch = (text) => {
if (!this.props.cryptoLoading) {
    this.setState({  
           searchCoin: true,
           searchText: true,
           })
     }
  }

第二，添加此类函数以标识要呈现的内容：

renderCryptoContainer(){
    if(!this.state.searchCoin){
    let updateCoinData = [...this.props.cryptoLoaded];
    let coins = [];
    for (let i=0; i<updateCoinData.length; i++) {
      let coinVal = updateCoinData[i]["long"] + updateCoinData[i]["short"]
      if (coinVal.indexOf(this.state.searchText) > - 1) {
          coins[]=i
        }
      return(
      <React.Fragment>
            {coins.map(i=> <CoinCard 
            no={i}
            key={updateCoinData[i]["short"]}
            coinShortName = {updateCoinData[i]["short"]}
            coinName = {updateCoinData[i]["long"]}
            coinPrice = {updateCoinData[i]["price"].toFixed(2)}
            marketCap = {(updateCoinData[i]["mktcap"]/1000000000).toFixed(4)}
            percentChange = {updateCoinData[i]["perc"].toFixed(2)}
            vwapData={updateCoinData[i]["vwapData"].toFixed(2)}    />)}

      </React.Fragment>)
    }
      var CryptoData = this.props.cryptoLoaded; 
      return(
      <React.Fragment>
        {returnCryptoData.map(el => {
        (<CoinCard
        no={i++}
        key={el["short"]}
        coinShortName = {el["short"]}
        coinName = {el["long"]}
        coinPrice = {el["price"].toFixed(2)}
        marketCap = {(el["mktcap"]/1000000000).toFixed(4)}
        percentChange = {el["perc"].toFixed(2)}
        vwapData={el["vwapData"].toFixed(2)}
       />})}
      </React.Fragment>
     )
     }

您的渲染功能应如下：

return (

       <ScrollView>
         <Header />
         {/* Custom Search Input */}
         <TextInput
          style={textInput}
          placeholder="Search Coin"
          onChangeText={(text) => this.onSearch(text)} />
         {this.renderCryptoContainer()}
       </ScrollView>
   )

反应更新子组件

1 个答案: