Question

我有一个自定义钩子class Main extends Component { state = { zone: "home", }; render() { function goTo(location) { console.log("yes " + location); this.setState({ zone: location }); } goTo = goTo.bind(this); return ( <React.Fragment> <div id="diagonal_shape"></div> <div className="row"> <div className="col s12" id="title"> <h4 className="center-align"> Peaceful<span id="title_steps"> Steps</span> <br /> {this.state.zone} </h4> </div> <div id="nav_bar"> <div className="col s4" id="goto_timer"> <p className="center-align"> <img src={timerIcon} width="60%" alt="clock" onClick={() => this.goTo("timer")} /> <br /> Timer </p> </div> <div className="col s4"> <p className="center-align"> <img src={streaksIcon} width="60%" alt="fire" onClick={() => this.goTo("stats")} /> <br /> Stats </p> </div> <div className="col s4"> <p className="center-align"> <img src={guideIcon} width="60%" alt="meditating" onClick={() => this.goTo("guides")} /> <br /> Guides </p> </div> </div> </div> </React.Fragment> ); } } export default Main;，它以useFetch作为输入并返回3个数据，并且我有组件URL来显示这些数据。我想使用CompanyListing语句在该挂钩中发送两个不同的值作为URL。如果用户未执行搜索，则显示if else中的数据，如果用户通过关键字搜索，则显示if endpoint中的数据。这是我写的else endpoint

CompanyListing.js

当我尝试在const [counter, setCounter] = useState(1); let endpoint = `${CONSTANTS.BASE_URL}/companies?page=${counter}`; const searchCompanies = (searchTerm) => { if (searchTerm === '') { endpoint = `${CONSTANTS.BASE_URL}/companies?page=${counter}`; //console.log('DEFAULT ENDPOINT', endpoint); } else { endpoint = `${CONSTANTS.BASE_URL}/companies?search=${searchTerm}`; //console.log('SEARCH ENDPOINT', endpoint); } }; //console.log('USEFETCH ENDPOINT', endpoint); const [companies, isLoading, meta] = useFetch(endpoint); return ( <> <div data-testid="search-box"> <SearchCompany callback={searchCompanies} /> </div> {!isLoading ? ( <div className="container"> <div className="row" data-testid="company-list"> {companies.length !== 0 && companies ? companies.map((company) => <CompanyLists key={company.id} {...company} data-testid="company-list" />) : 'No companies'} </div> <Pagination meta={meta} counter={counter} setCounter={setCounter} data-testid="paginate" /> </div> ) : ( <Spinner /> )} </> ); }; export default CompanyListing;内调用useFetch时，这违反了钩子规则，并且当我尝试像上面的代码一样执行操作时，无法将搜索端点传递给if else。知道如何解决吗？我尝试通过在同一个组件上进行所有提取来工作，并且效果很好，但是已经有了自定义钩子，我不想再次重复代码。以及为什么我要为同一件事获得5个控制台？帮助将不胜感激。

Answer 1

问题是我认为，在调用searchCompanies时不会重新渲染您的父组件，因此将不会调用结果useFetch，并且您也不能在如果还有，

因此，我认为您可以执行以下操作，将端点保持在状态并在调用searchCompanies时进行更改，这样，您的组件将被重新呈现，并且您将获得最新的端点

const [counter, setCounter] = useState(1);
const [endpoint,setEndPoint] = useState(`${CONSTANTS.BASE_URL}/companies?page=${counter}`);

const searchCompanies = (searchTerm) => {
  if (searchTerm === '') {
    setEndPoint(`${CONSTANTS.BASE_URL}/companies?page=${counter}`);
  } else {
    setEndPoint(`${CONSTANTS.BASE_URL}/companies?search=${searchTerm}`);
  }
};

//console.log('USEFETCH ENDPOINT', endpoint);
const [companies, isLoading, meta] = useFetch(endpoint);

如何在自定义挂钩中传递条件值？

1 个答案: