如果只有部分状态发生变化，有没有办法停止反应重新渲染？
问题是，每次我将鼠标悬停在标记上时，都会打开或关闭弹出窗口，这会导致所有标记重新渲染，即使mystate没有更改，只有activePlace状态正在更改。console.log(myState);每次我将鼠标悬停在标记内和外时都会运行。
我尝试使用 useMemo 挂钩，但不知道如何使用它。有什么帮助吗？
这是我的代码：
import React, { useEffect, useState } from 'react';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import axios from 'axios';
import { v4 as uuidv4 } from 'uuid';
import { Icon } from 'leaflet';
const myicon = new Icon({
iconUrl: './icon.svg',
iconSize: [20, 20]
});
const MyMap = () => {
const [myState, setMyState] = useState(null);
const [activePlace, setActivePlace] = useState(null);
const getData = async () => …javascript reactjs react-component react-state-management react-hooks
每次状态更改时都会呈现两个使用 Zustand 存储的不同子组件。尽管他们在组件中使用的状态属性没有更新。我没有在组件中使用整个商店，只是尝试利用商店切片。这是组件
//Store
import create from "zustand";
export const useStore = create((set) => ({
shows: [
{
id: Math.floor(Math.random() * 100),
name: "River Where the Moon Rises",
},
{
id: Math.floor(Math.random() * 100),
name: "The Crowned Clown",
},
],
title: 'Default Title',
addShow: (payload) => set((state) => {state.shows.push({id:Math.floor(Math.random() * 100), name:payload})}),
updateTitle: (newTitle) => set({title:newTitle}),
}));
//App - component
function App() {
return (
<>
<ShowManagement />
<TitleManagement />
</>
);
}
export default App;
//ShowManagement - component
import …我有这个容器在哪里和不在同一水平.当我点击按钮(放在父母上)时,如何获取表格的状态？
我已经创建了一个演示来解决我的问题.
https://codesandbox.io/s/kmqw47p8x7
class App extends React.Component {
constructor(props) {
super(props);
}
save = () => {
alert("how to get state of Form?");
//fire api call
};
render() {
return (
<div>
<Form />
<button onClick={this.save}>save</button>
</div>
);
}
}
我将状态挂钩作为道具传递给我的组件，并且我的“setCity”工作得很好，但是当我尝试实现 setFlag 时，我收到一条错误消息“Searchbar.jsx:15 Uncaught TypeError: setFlag is not a function”
那么为什么我可以设置city的值而不是flag呢？我将道具从“应用程序”传递到“页脚”，然后再传递到“搜索栏”。
function App(){
const [city, setCity] = useState("");
const [flag, setFlag] = useState("");
return (
<div className='container'>
<Header className='header' />
<Body className='body' city={city} flag={flag}/>
<Footer className='footer' setCity={setCity} setFlag={setFlag}/>
</div>
);
}
function Footer({setCity}, {setFlag}){
return(
<div className='footer'>
Footer
<Searchbar className='searchbar' setCity={setCity} setFlag={setFlag}/>
</div>
)
}
function Searchbar({setCity}, {setFlag}){
handleChange = (e) =>{
e.preventDefault();
console.log(e.target.value);
setCity(e.target.value);
}
handleSubmit = (e) => {
e.preventDefault();
console.log("submitted");
setFlag(false);
}
return(
<div className='searchbar'>
<form>
<select …javascript reactjs react-props react-state-management react-hooks