React Component 正在渲染两次

Question

我不知道为什么，第一个渲染显示空 object，第二个显示我的数据：

function RecipeList(props) {
    return (
        <div>
            {console.log(props.recipes)}
            {/*{props.recipes.hits.map(r => (*/}
            {/*    <Recipe initial="lb" title={r.recipe.label} date={'1 Hour Ago'}/>*/}
        </div>
    )
}

const RECIPES_URL = 'http://cors-anywhere.herokuapp.com/http://test-es.edamam.com/search?i?app_id=426&q=chicken&to=10'
export default function App() {
  const classes = useStyles();
  const [data, setData] = useState({});

    useEffect(() => {
        axios.get(RECIPES_URL)
            .then(res => {
                setData(res.data);
            })
            .catch(err => {
                console.log(err)
            })
    }, []);
  return (
    <div className={classes.root}>
      <NavBar/>
      <RecipeList recipes={data}/>
      <Footer/>
    </div>
  );
}

不知道为什么，折腾了一个多小时（React新手），肯定是漏了什么。

Answer 1

这是完全正常的，React 将首先在没有数据的情况下渲染您的组件。然后当你的 axios.get returns 和更新数据时，它将用新数据再次渲染

Answer 2

这是预期的行为。您看到两个控制台日志的原因是，第一次调用 RecipeList 时没有数据（空对象），第二次调用时数据可用。如果你想只在数据可用时渲染它，你可以做类似 {Object.keys(data).length > 0 && <RecipeList recipes={data}/>} 的事情。顺便说一句，这叫做条件渲染。

React Component 正在渲染两次

React Component is rendering twice

reactjs

create-react-app