React Firebase 更新组件而不刷新

Posted 2023-02-22

【中文标题】React Firebase 更新组件而不刷新

【英文标题】：React Firebase update components without refresh

【发布时间】：2021-05-29 22:13:39

【问题描述】：

我在下表中填充了来自 firebase 的数据。一切正常，所有更新都进入表格，但我必须刷新页面才能看到新增内容。有没有办法来解决这个问题？到目前为止我看到的解决方案使用了 react redux，我没有实现，也不知道如何使用，所以我无法让它们工作。提前致谢！

class oneRegisterInfo extends Component
    constructor(props) 
        super(props);

        this.state = 
            rows: [],
            index: '',
            body: '',
            dataType: '',
            options: [],
            open: false,
            buttonType: ''
        ;

    

    componentDidMount = () => 
        axios
            .get('/RowData')
            .then((response) => 
                this.setState(
                    rows: response.data,
                );
            )
            .catch((err) => 
                console.log(err);
            );
    ;

        render()
            const handleSubmit = (event) => 
                // authMiddleWare(this.props.history);
                event.preventDefault();
                const newRow = 
                    index: this.state.index,
                    body: this.state.body,
                    dataType: this.state.dataType,
                    options: this.state.options,

                ;
                let options = ;
                if (this.state.buttonType === 'Edit') 
                    options = 
                        url: `/RowData/$this.state.rowId`,
                        method: 'put',
                        data: newRow
                    ;
                 else 
                    options = 
                        url: '/RowData',
                        method: 'post',
                        data: newRow
                    ;
                
                // const authToken = localStorage.getItem('AuthToken');
                // axios.defaults.headers.common =  Authorization: `$authToken` ;
                axios(options)
                    .then(() => 
                        this.setState( open: false );
                    )
                    .catch((error) => 
                        this.setState( open: true, errors: error.response.data );
                        console.log(error);
                    );
            ;


            return(
                <div>
                    <div>
                        <center><h1>Page 1</h1></center>
                    </div>

                    <TableContainer>
                      <Table>
                        <TableHead>
                          <StyledTableRow>
                            <StyledTableCell align="left">Index</StyledTableCell>
                            <StyledTableCell align="left">Body</StyledTableCell>
                            <StyledTableCell align="left">Datatype</StyledTableCell>
                            <StyledTableCell align="left">Options</StyledTableCell>
                          </StyledTableRow>


                        </TableHead>
                        <TableBody>
                          this.state.rows.map((row) => (
                            <StyledTableRow key=row.rowId>
                              <StyledTableCell align="left">row.index</StyledTableCell>
                              <StyledTableCell align="left">row.body</StyledTableCell>                       
                              <StyledTableCell align="left">row.dataType</StyledTableCell>
                              <StyledTableCell align="left">
                                  <Options options = row.options/>
                              </StyledTableCell>
                            </StyledTableRow>
                          ))
                        </TableBody>
                      </Table>
                    </TableContainer>

                    // ...form

【问题讨论】：

你的 handleSubmit 函数应该在你的 render 函数之外。

您发布的代码的哪一部分从 Firebase 读取数据？

componentDidMount

【参考方案1】：

firebase 文档非常有用。它们非常深入，甚至可以为您提供 20 种语言的所有代码。 https://firebase.google.com/docs

db.collection("yourCollection")
    .onSnapshot((querySnapshot) => 
        querySnapshot.forEach((doc) => 
            console.log(doc.data()); //do what ever you need here
        );
        console.log();
    );

使用 useState 钩子也可能是真的。好多了。

【讨论】：

我不想更改为功能组件来使用 useState 挂钩，但我可能必须尝试一下

@dmccaul 无论哪种方式，为了从您使用 onSnapshot

的 firebase 获取实时数据，一般过程都是相同的