React Log Running Twice

Question

我是React的新手，想知道为什么console.log()在我运行应用程序时执行两次?

import React, { useState } from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import SearchBar from '../components/SearchBar';
import useResults from '../hooks/useResults';
import ResultsList from '../components/ResultsList';
const SearchScreen = () => {
const [ term, setTerm ] = useState( '' ),
[ searchApi, results, errorMessage ] = useResults();
const filterResultsByPrice = ( price ) => {
return results.filter( result => {
return result.price === price;
} );
}
console.log( results[0].name ); // Is being printed twice. Why?
return (
<View style={ { flex: 1 } }>
<SearchBar
term={ term }
onTermChange={ setTerm }
onTermSubmit={ () => searchApi( term ) }
/>
{ errorMessage ? <Text>{ errorMessage }</Text> : null }
<Text>We have found { results.length } results.</Text>
<ScrollView>
<ResultsList title="Cost Effective" results={ filterResultsByPrice( '$' ) } />
<ResultsList title="Bit Pricier" results={ filterResultsByPrice( '$$' ) } />
<ResultsList title="Big Spender" results={ filterResultsByPrice( '$$$' ) } />
<ResultsList title="Price Unknown" results={ filterResultsByPrice( undefined ) } />
</ScrollView>
</View>
);
};
const styles = StyleSheet.create( {} );
export default SearchScreen;

当我在Git Bash中查看日志时，我注意到它执行了两次而不是一次，这是为什么?

Answer 1

因为你的组件重新呈现了两次:

1. 初始化状态
2. 状态更新时。

因此你在组件体中的代码会重新执行。

Answer 2

这是预期的行为，因为组件可以多次呈现。每当你的组件呈现时，控制台日志就会被执行。

如果要只执行一次代码(当组件第一次挂载时)，使用useEffect钩子传递第二个参数[](一个空数组)。

或者，您可能希望在结果更改时打印到控制台。因此，你可以将[results]作为第二个参数传递给useEffect，而不是一个空数组，这样useEffect中的代码就会在results变化时执行，而不是每次渲染。

useEffect(() => {
console.log(results[0].name);
}, [results]);

如果你不熟悉useEffect钩子，这里有一个很好的解释: