Как обновить данные родительского компонента после обновления базы данных?

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> компонент, как заставить реагировать на обновление dataиз api? В этом случае перезапуститеuseEffect Раньше обновлял api.

РЕДАКТИРОВАТЬ

Я решил проблему так:

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

return <Form toggleFunction={toggler}>

Мне интересно, есть ли правильное решение

Answer 1

Чао, попробуйте этот код:

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составная часть. Затем наmakeUpdate Я меняю значение родительского состояния и подключаюсь useEffect к этому (в списке deps).

Answer 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
},[])

потому что без скобок он будет называться после всего!!! и в этом сценарии вы будете вызываться только при первом рендеринге компонента

Answer 3

Вы можете использовать официальную документацию React в качестве вдохновения и попробовать написать свой компонент следующим образом:

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 при нажатии кнопки "Отправить".