如何在 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