父 React 组件不使用反应钩子重新渲染子级的更改状态；答案

【问题标题】：Parent React component not re-rendering on change state in child using react hooks;父 React 组件不使用反应钩子重新渲染子级的更改状态；
【发布时间】：2020-07-24 15:48:23
【问题描述】：

我有一个父组件“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>
      )
  }
}

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

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

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案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} />

这应该可以解决您的问题

【讨论】：

太棒了，它正在工作，谢谢！请你解释一下为什么它不能通过匿名函数工作以及我们必须在哪里通过匿名函数运行它？谢谢！
您可以添加 setter={()=>setLists()} 来定义一个函数，因为您发送的函数将返回 setLists 返回的值，之前您只是发送函数引用不是它的返回值..