为什么值在控制台上打印两次?

Question

我试图在浏览器控制台上打印所选颜色的值，我不明白为什么它打印两次以及如何纠正它。

const ProductList = () => {
const [filters, setFilters] = useState({});
const handleFilters = (e) => {
const value = e.target.value;
const name = e.target.name;
setFilters({
[name]: value,
});
};
console.log(filters);

return (
<Container>
<Announcement />
<Navbar />
<Title>Dresses</Title>
<FilterContainer>
<Filter>
<FilterText>Filter Products:</FilterText>
<Select name="color" onChange={handleFilters}>
<Option disabled>color</Option>
<Option>white</Option>
<Option>black</Option>
<Option>red</Option>
<Option>pink</Option>
<Option>brown</Option>
<Option>green</Option>
<Option>milk</Option>
</Select>
</Filter>
</FilterContainer>
<Products />
<Newsletter />
<Footer />
</Container>
);
};
export default ProductList;

[![控制台图片][1]][1][1]:https://i.stack.imgur.com/QKPHu.png

Answer 1

这是因为React严格模式的代码。

Remove -> React.StrictMode, from ReactDOM.render code.

每次重新渲染都会渲染2次:

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

将渲染1时间:

ReactDOM.render(
<>
<App />
</>,
document.getElementById('root')
);