javascript - 父 React 组件未使用反应钩子在子级更改状态时重新渲染；

Question

我有一个父组件“HOME”和用于创建新池的表单。我将池数组和 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>
      )
  }
}

“泳池”（儿童）

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问题吗？

我将不胜感激任何建议！谢谢！

标签： javascriptreactjsreact-hooks

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

这应该可以解决您的问题