Question

我有一个父组件'HOME'和用于创建新Pool的表单。我正在将Pool数组和setState函数发送到子组件中。而且，如果我不刷新页面，父组件也不会呈现新池。

“主页”

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

这应该可以解决您的问题

父React组件不会使用react钩子在子级的更改状态上重新渲染；

1 个答案: