Reactjs 状态更改时重新加载另一个组件

我想在状态更改时重新加载另一个组件。我有条件组件。其中一个与我的主要组件中的输入有关。它首先被渲染，但当我更改输入值（也是状态值）时，我无法重新渲染它。该组件是

SearchGifList

import React from 'react';
import logo from './logo.svg';
import './App.css';
import TrendingGifList from './TrendingGifList';
import SearchGifList from './SearchGifList';



class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        value: '',
        search: false
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    event.preventDefault();
    this.setState({
      search : true,
    })
  }
  getTrendingGifs = () => {
    this.setState({
      search : false,
      value: ''
    })
  }

  getComponent = () => {
    if(this.state.search) {
      return <SearchGifList value={this.state.value} />
    }
    else {
      return <TrendingGifList />
    }
  }
  render() {
    return (
      <>    
            <div>
                <a onClick={this.getTrendingGifs}>Logo</a>
                <form onSubmit={this.handleSubmit}>
                  <input className="input-search" type="text" value={this.state.value} onChange={this.handleChange} />
                  <button type="submit" >Search</button>
                </form>
            </div>
            <div>
                {this.getComponent()}
            </div>
      </>
    ); 
  }
}

export default App;

从“React”导入React；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“/TrendingGifList”导入TrendingGifList；
从“/SearchGifList”导入SearchGifList；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：“”，
搜索：false
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
this.setState（{value:event.target.value}）；
}
handleSubmit（事件）{
event.preventDefault（）；
这是我的国家({
搜索：对，
})
}
getTrendingGifs=（）=>{
这是我的国家({
搜索：假，
值：“”
})
}
getComponent=（）=>{
if（this.state.search）{
返回
}
否则{
返回
}
}
render（）{
返回(
标志
搜寻
{this.getComponent（）}
); 
}
}
导出默认应用程序；

搜索列表组件代码：

import React, { Component } from 'react';
import Masonry from 'react-masonry-css';
import {API_KEY, API_URL_search} from './constants'

class SearchGifList extends Component {
    constructor(props) {
        super(props);
        this.state = {
          error: null,
          isLoaded: false,
          items: [],
          breakpointColumnsObj : {
            default: 4,
            1100: 3,
            700: 2,
            500: 1
            },
            offset: 0,
            limit: 20,
            api_key: API_KEY,
            total_count: 0,
            value: this.props.value
        };
      }


    searchGifs = () => {
      fetch( API_URL_search + 
      "?q=" + this.state.value +
      "&api_key=" + this.state.api_key + 
      "&limit=" +  this.state.limit +
      "&offset=" + this.state.offset)
          .then(res => res.json())
          .then(
            (result) => {
                this.setState({
                isLoaded: true,
                items: (this.state.items).concat(result.data),
                total_count: result.pagination.total_count,
                offset : this.state.offset + 20
              });

            },
            (error) => {
              this.setState({
                isLoaded: true,
                error : 'Somethings went wrong to search gifs.'
              });
            }
          )
    }

      componentDidMount() {
        this.searchGifs();
      }

      loadMore = () => {
        if(this.state.offset < this.state.total_count){
          this.setState({
            offset : this.state.offset + 20
          });
        }
        this.searchGifs();
      }


    render() {
        const { error, isLoaded, items } = this.state;
        if (error) {
        return <div>Error: {error.message}</div>;
        } else if (!isLoaded) {
        return <div>Loading...</div>;
        } else {
        return (
            <>

                <Masonry
                breakpointCols={this.state.breakpointColumnsObj}
                className="my-masonry-grid"
                columnClassName="my-masonry-grid_column"
                >
                    {items.map(item => (
                        <div className="gif-container" >
                            <img className="gif-preview" height={item.images.fixed_width.height} src={item.images.fixed_width.webp} alt="giphy baby" />
                        </div>

                    ))}
                </Masonry>

                <button onClick={this.loadMore}>Load More</button>
            </>
        );
        }
    }

}

export default SearchGifList;

import React，{Component}来自'React'；
从“反应砌体css”导入砌体；
从“./constants”导入{API_键，API_URL_搜索}
类搜索列表扩展组件{
建造师（道具）{
超级（道具）；
此.state={
错误：null，
isLoaded:false，
项目：[]，
Sobj：{
默认值：4，
1100: 3,
700: 2,
500: 1
},
偏移量：0，
限额：20，
api_密钥：api_密钥，
总数：0，
值：this.props.value
};
}
searchGifs=（）=>{
获取（API\u URL\u搜索+
“？q=“+this.state.value+
“&api_key=“+this.state.api_key+
“&limit=“+this.state.limit”+
“&offset=“+this.state.offset”）
.then（res=>res.json（））
.那么(
（结果）=>{
这是我的国家({
isLoaded：是的，
items：（this.state.items）.concat（result.data），
总计数：result.pagination.total计数，
偏移量：this.state.offset+20
});
},
（错误）=>{
这是我的国家({
isLoaded：是的，
错误：“搜索GIF时出错。”
});
}
)
}
componentDidMount（）{
这个。searchGifs（）；
}
加载更多=（）=>{
if（this.state.offset(
))}
加载更多
);
}
}
}
导出默认搜索列表；

它应该在更改状态后呈现内容。下面是我现在为您创建的一个类似示例

请检查一下，我想这会对你有很大帮助

若你们仍然并没有得到任何想法，那个么通过codesandbox将你们的示例发送给我，我会帮你们检查

---

谢谢

我解决了问题

componentdiddupdate（）

方法：

componentDidUpdate(prevProps) {
        if (this.props.value !== prevProps.value) {

          setTimeout(() => {
            this.setState({
            items: [],
            offset: 0
          }, function(){
            this.searchGifs();
            });
          }, 10)

        }
      }

---

感谢您提供的所有答案

是否

SearchGifList

未呈现的组件？如果是这样的话，你能分享它的代码吗？胡乱猜测：

SearchGifList

只在

componentDidMount

上搜索，而不关心

value

prop是否更新later@skyboyer这是真的，但如果我删除它，它就不起作用了。我还添加了SearchGifList组件代码。感谢您的回答，但我找不到答案：（Props对于SearchGifList来说是可以的，但我找不到一种方法来调用searchGifs（）方法，因为每次更改Props时，Props都会被调用。SearchGifList组件可能是错误的。