如何在 react.js 中同步 state？

Question

我在更新我的 state 和我的組件時遇到了困難。 按下按鈕后，我更改了彈出組件的其中一個道具的值。 道具的價值不會更新。 我相信這是使用 setstate 的副作用之一。 我做了一些研究，發現有一種方法可以使用 useeffect 鈎子解決這個問題，但我無法收到結果。 下面是我的代碼：

我的目標是從具有 Data0 道具的表單中獲得 Data1 道具，但道具似乎根本沒有更新。 我正在模擬單擊多個對象，結果是 fromData 值的更新。 因此，app.js 是我的父組件。 子組件是彈出窗口，其值應更改為 Bob 和實際日期，而不僅僅是原始名稱和原始日期的字符串值。

import React, { useState, useEffect } from 'react';
import './App.css';
import FormDialog from './component/popup'
import Button from '@material-ui/core/Button';


function App() {
  const Data0 = { name:'original name', date:'original date' }
  const Data1 = { name:'Bob', date:'1939' }
  const [formStatus, setformStatus] = React.useState(false);
  const [formdata2, setformData2] = useState(Data0)
  const [tempform, settempform] = useState(<FormDialog formStatus = {formStatus} handelForm={() => handelForm()} Data0={Data0}/>)


  const handelForm = () => {
    const tempform = <FormDialog formStatus = {formStatus} handelForm={() => handelForm()} Data0={Data1}/>
    settempform(tempform);
  };

  useEffect(() => {
    const tempform = <FormDialog formStatus = {formStatus} handelForm={() => handelForm()} Data0={Data1}/>
    settempform(tempform);
    setformStatus(!formStatus);
    console.log('formdata2 EFFECT', formdata2)
    settempform(tempform);
    setformStatus(!formStatus);
    setformStatus(!formStatus);
  }, [formdata2]
  );

  return (
    <div className="App">
      <h1 align="center">React-App</h1>
      <h4 align='center'>Render Custom Component in Material Table</h4>
      <Button variant="outlined" color="primary" onClick={() => handelForm()}>
        Vendor row
      </Button>
      {tempform}
      {formdata2.billingVendor}
    </div>
  );
}

export default App;

export default function FormDialog (props) {
  let [Data, setData] = React.useState(props.Data0);

  return (
    <React.Fragment>
      <Dialog
        maxWidth='lg'
        open={props.formStatus}
        aria-labelledby="max-width-dialog-title"
        disableBackdropClick= {true}
        disableEscapeKeyDown={true}
      >
        <DialogTitle className={classes.title}>{Data.name}</DialogTitle>
        <Divider />
        <DialogContent>
            <DialogContentText>
                Please be cautious when updating the fields below.
            </DialogContentText>
            <form noValidate>
                <FormControl className={classes.formControl} fullWidth= {true}>
                <div className={classes.root}>
                    <TextField
                        fullWidth
                        label='Date'
                        style={{ margin: 8 }}
                        disabled
                        value={Data.name}
                        variant="outlined"
                        />
                    <br/>
                    <TextField
                        fullWidth
                        label='Date'
                        style={{ margin: 8 }}
                        disabled
                        value={Data.name}
                        variant="outlined"
                        />
                    <br/>
                    <TextField
                        fullWidth
                        style={{ margin: 8 }}
                        disabled
                        value={Data.date}
                        variant="outlined"
                        />
                    <br/>
                    <TextField
                        fullWidth
                        style={{ margin: 8 }}
                        disabled
                        value={Data.date}
                        variant="outlined"
                        />
                    <br/>
                    
                    </div>

                </FormControl>
            </form>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => props.handelForm()} color="primary">
            Close
          </Button>
        </DialogActions>
      </Dialog>
    </React.Fragment>
  );
}```

Answer 1

您正在根據子組件中的道具值創建一個新的 state，該值獨立於父組件中的 state。 因此，孩子的變化不能傳回給父母。

要解決這個問題，

1. 通過在您的父組件中創建 state

const [Data0, setData0] = useState({ name:'original name', date:'original date' })

2. 通過setState function 將父組件中的值更改為您的孩子

const tempform = <FormDialog formStatus = {formStatus} handelForm={() => handelForm()} Data={Data1} setData={setData0}/>

3. 相應地更改子組件中的值

let {Data, setData} = props;

然后setData的調用應該調用父組件中的那個，它應該能夠相應地更新值。

Answer 2

我認為您遵循的過程不是一個好的過程。 您不應該在 state 中存儲反應組件，而應該動態加載組件或傳遞您需要的道具。

import React, { useState, useEffect } from 'react';
import './App.css';
import FormDialog from './component/popup'
import Button from '@material-ui/core/Button';


function App() {
  const Data0 = { name:'original name', date:'original date' }
  const Data1 = { name:'Bob', date:'1939' }
  const [formStatus, setformStatus] = React.useState(false);
  const [formdata2, setformData2] = useState(Data0)
  const [formData, setFormData] = useState(Data0)


  const handelForm = () => {
    // here change the state however you want

    setFormData(Data0);
  };

  return (
    <div className="App">
      <h1 align="center">React-App</h1>
      <h4 align='center'>Render Custom Component in Material Table</h4>
      <Button variant="outlined" color="primary" onClick={() => handelForm()}>
        Vendor row
      </Button>
       <FormDialog formStatus = {formStatus} handelForm={() => handelForm()} Data0={formData}/>
    </div>
  );
}

export default App;

在FormDialog添加 useEffect 以執行更改

useEffect(() => {
    setData(props.Data0)
}, [props.Data0])

這是使用更改更新 state