父React组件不使用React钩子在子级中重新呈现更改状态

Question

我有一个父组件"HOME"和用于创建新池的窗体。我正在将池数组和setState函数发送到子组件中。如果我不刷新页面，父组件就不会呈现新的池。

"HOME">

export default function Home() {
const [user, setUser] = useState({});
const [lists, setLists] = useState([]);
useEffect(() => {
if (!user.id) {
async function fetchUser() {
await axios.get('/api/user/')
.then(async data => {
!!data.data ? (setUser(data.data), setLists(data.data.pools)) : await createUser()
}
);
}
async function createUser() {
await axios.post('/api/user/')
.then(data => { setUser(data.data) });
}
fetchUser();
}
}, [])

if (user.name) {
return (
<div>
<center><header> Welcome to MyShopper!</header></center>
<NewPool setter={() => setLists} poolsArr={lists} />
{lists.length > 0 &&
lists.map(pool => (
<div id='pools_list' key={pool.id}>
<Pools poolInfo={pool} />
</div>))
}
</div>
)
} else {
return (
<p>Loading...</p>
)
}
}

"POOL"；(儿童(

import axios from 'axios';
export default function NewPool(props){
const [name,setName]=useState(null);
const pools=props.poolsArr;
const setPool=props.setter;
async function onClickHandler(event){
event.preventDefault();
await axios.post('/api/pool/',{poolName:name})
.then(pool=>{()=>setPool([...pools,pool.data])});   
}
function onChangeEv(event){
setName(event.target.value);
}
return(
<form onSubmit={onClickHandler}>
<input type="text" id = "name" name="name" 
onChange={onChangeEv}/>
<input type="submit" value="AddPool"/>
</form>
)
}

我知道如何使用Redux修复它。在这里，我想更好地理解React Hooks。这是bind的问题吗？

如果有任何建议，我将不胜感激！非常感谢。

Answer 1

在这里，您将setLists作为函数引用传递所以setter是一个返回setLists引用的函数

<NewPool setter={() => setLists} poolsArr={lists} />
// using this you'd need to call setter()() to call setLists()

你可以直接通过这个的功能

<NewPool setter={setLists} poolsArr={lists} />

这应该可以解决的问题