父 React 組件不會在使用反應鈎子的子項中更改 state 時重新渲染；

Question

我有一個父組件“HOME”和用於創建新池的表單。我將池數組和 setState function 發送到子組件。 如果我不刷新頁面父組件將不會呈現新池。

“家”

  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>
      )
  }
}

“泳池”（兒童）

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 作為 function 引用傳遞，因此 setter 是 function ，它返回 setLists 引用，

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

您可以像這樣直接傳遞function

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

這應該可以解決您的問題