数据库更新后如何更新父组件的数据？答案

【问题标题】：How to update data of parent component after database update?数据库更新后如何更新父组件的数据？
【发布时间】：2020-11-17 15:40:58
【问题描述】：

我的组件结构大致如下：

const [data, setData] = useState([]);
useEffect(()=>{
    //update data from api
}, [])
return <Switch>
    <Route exact path={`${match.path}`}>
        {data.map(row=>
            <Link to={`${match.url}/${row.id}`}></List>
        }
    </Route>
    <Route path={`${match.path}/:id`}>
        <Form>
        </Form>
    </Route>
</Switch>

当我更新<Form> 组件中的数据时，如何强制响应从 api 更新data？在这种情况下，重新运行我用来更新api的useEffect。

编辑

我解决问题的方法是这样的：

const [toggle,toggler] = useState(false);
useEffect(()=>{
    //update from api
},[toggle]);

return <Form toggleFunction={toggler}>

我想知道是否有合适的解决方案

【问题讨论】：

Ciao，您的解决方案是正确的。至少，你想避免在 Form 组件上传递 prop，你可以使用 react-redux。但是您的解决方案有效。

标签： reactjs react-router react-functional-component

【解决方案1】：

Ciao，试试这个代码：

const [data, setData] = useState([]);
const [update, setUpdate] = useState(false);
useEffect(()=>{
    //update data from api
}, [update])

const makeUpdate = () => {
   let curr_val = update;
   setUpdate(!curr_val);
};

return <Switch>
    <Route exact path={`${match.path}`}>
        {data.map(row=>
            <Link to={`${match.url}/${row.id}`}></List>
        }
    </Route>
    <Route path={`${match.path}/:id`}>
        <Form onUpdate={makeUpdate}>
        </Form>
    </Route>
</Switch>

然后，在Form 组件上，当您需要更新时，只需调用props.onUpdate()。

解释：在Form 组件中将函数作为prop 传递。然后，在makeUpdate 上，我更改父状态值并将useEffect 连接到这个（在 deps 列表上）。

【讨论】：

【解决方案2】：

我认为你应该向表单组件发送一个将使用该函数的方法

const onSubmit = (e)=> {
}
<Form onSubmit={(e)=> a method}/>

另一种解决方案是像这样使用效果：

    useEffect(()=> {
     //called data
     setState(false);
    },[statepick]);
   <Form isSubmit={(e)=>setState(true)}

我更喜欢使用函数一，因为您只需在需要时调用 API，并且 useEffect 会在您更新数据状态后根据需要更改内容。另外，把useEffect改成这样：

useEffect(()=>{
    //update data from api
},[])

因为没有括号，它将在所有内容之后调用！！！在这种情况下，您只会在组件第一次渲染时被调用

【讨论】：

【解决方案3】：

您可以参考官方React documentation 为灵感，尝试这样编写您的组件：

const { useState } = React;

function App() {
  const [name, setName] = useState("");

  // send data on submit
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(`Sending name [${name}] to API...`);
  };

  const handleChange = event => {
    setName(event.target.value);
  };

  return (
    <div>
      <ChildForm value={name} handleChange={handleChange} handleSubmit={handleSubmit} />
    </div>
  );
}

const ChildForm = props => {
  return (
    <form onSubmit={props.handleSubmit}>
      <label>
        Name:
        <input type="text" value={props.value} onChange={props.handleChange} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

在此示例中，您在单击“提交”时向 API 发送请求。

【讨论】：