React useState hook - 组件被渲染两次

Question

我想知道为什么我的组件SearchResults被渲染了两次。

在MainPage组件中，我想传递offers给子组件SearchResults：

const mainPage = () => {

    const [offers, setOffers] = useState(null);

    useEffect(() => {
        onInitOffers();
    }, [])

    const onInitOffers = () => {
        axios.get('/offers')
            .then(response => {
                setOffers(response.data);
            })
            .catch(error => {
                console.log(error);
            })
    }


    const searchResults = (
        <SearchResults
            searchedOffers={offers}
        />
    );

    return (
        <Aux>
            <div className={classes.container}>
                <div className={classes.contentSection}>
                    {searchResults}
                </div>
            </div>
        </Aux>
    )
}

export default mainPage;

为什么组件SearchResults被渲染两次？如何offers使用钩子正确传递给子组件？

在我的子组件 SearchResults 中，我必须添加 if 避免错误映射的条件不是函数：

const searchResults = props => {


    useEffect(() => {
        console.log("RENDER");
        console.log(props.searchedOffers) --> null for the first time
    }, [props.searchedOffers]);

    let offers = null;
    if (props.searchedOffers !== null) { --> props.searchedOffers is not null after the second render
        offers = props.searchedOffers.map(offer => {
            return (
                <Grid key={offer.id}>
                    <SearchResult key={offer.id} offer={offer}/>
                </Grid>
            )
        });
    }

Answer 1

它被渲染两次，因为当元素安装时，你设置offers为null. 如果您想确保只SearchResults在offersnot时渲染组件null，您可以执行以下操作：

return (
  <Aux>
    <div className={classes.container}>
      <div className={classes.contentSection}>
        {offers && <SearchResult searchedOffers={offers} />}
      </div>
    </div>
  </Aux>
)

如果你想非常确定offers是一个数组，你可以做类似的事情{Array.isArray(offers) && <SearchResult searchedOffers={offers} />}。

通常在执行这样的异步操作时，您可能会选择实际使用三元运算符在获取发生时显示加载指示符：

return (
  <Aux>
    <div className={classes.container}>
      <div className={classes.contentSection}>
        {offers ? <SearchResult searchedOffers={offers} /> : "Loading..."}
      </div>
    </div>
  </Aux>
)