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

Question

我的组件结构大致如下：

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

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

Answer 1

好吧，我认为你应该向 Form 组件发送一个 prop，一个将使用该函数的方法

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

另一个解决方案是像这样使用 Effect：

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

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

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

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

Answer 2

再见，试试这个代码：

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 列表上）。

Answer 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 发送请求。

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

How to update data of parent component after database update?

reactjs

react-router

react-functional-component