Question

我正在用Reactjs开发一个应用程序。在其中，我有一个API，可从AWS数据库表中获取数据并填充状态数组，然后填充状态表。我无法弄清楚如何让用户依次更新表的值，然后保存这些更改，然后让API将其上传回数据库。我有一个update方法，但是它给出了一个错误消息，提示我无法更新状态Array或会抱怨列数组未定义。

我有以下代码：

export default function Complaints(props) {

    const [complaint, setComplaint] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [isInEditMode, setIsEditMode] = useState(false);
    const [defaultValue, setDefaultValue] = useState("");

    var columsArr = [
        { title: 'Customer ID', field: 'id' },
        { title: 'Issue', field: 'complaintName' },
        { title: 'Description', field: 'complaintDescription'},
        { title: 'Order ID', field: 'complaintOrderId'},
        { title: 'Submitted', field: 'createdAt'},
        { title: 'Updated', field: 'updatedAt'},
        { title: 'Admin Comment', field: 'adminComment'},
    ];

    useEffect(() => {
        async function onLoad() {
            if (!props.isAuthenticated) {
                return;
            }

            try {
                const complaint = await loadComplaint();
                setComplaint(complaint);
                setState({
                    columns: [state.columns, ...columsArr],
                    complaint: [...state.complaint, ...complaint]
                });
                console.log(complaint)
            } catch (e) {
                alert(e);
            }

            setIsLoading(false);
        }

        onLoad();
    }, [props.isAuthenticated]);

    function loadComplaint() {
        return API.get("kleen", "/Complaint");
    }

    // function edit(adminComment) {
    //     setIsEditMode(true);
    //     setDefaultValue(adminComment);
    //     console.log("value is"+ adminComment);
    // }

    // function updateComplaint() {
    //     return API.put("kleen", `/Complaint/${props.}`);
    // }

    const [state, setState] = React.useState({
        columns: [],
        complaint: []
});

    return (
        <MaterialTable style={{
            marginTop: "8rem",
            marginLeft: "auto",
            marginRight: "auto",
            position: "sticky",
        }}
            title="Complaints"
            columns={state.columns}
            data={state.complaint}
            editable={{
                onRowUpdate: (newData, oldData) =>
                    new Promise(resolve => {
                        setTimeout(() => {
                            resolve();
                            if (oldData) {
                                let key = 1;
                                setState(prevState => {
                                    complaint: prevState.complaint.map(el => el.key === key ? {...el, adminComment: "testing"}: el)
                                    // const data = [...prevState.data];
                                    // data[data.indexOf(oldData)] = newData;
                                    // return { ...prevState, data };
                                });
                            }
                        }, 600);
                    }),
            }}
        />
    );
}

我对Reactjs非常陌生，任何帮助将不胜感激。

Answer 1

可以实现的一种方法是：

首先将状态存储在变量中
更新数组变量
将变量恢复为状态。

Answer 2

如果要使用状态，最好使用组件类

select 
     calendar_day,
     nvl(cash_date, max_cash_date) as cash_date 
from
(
select 
       calendar_day
       ,cash_date
       ,max(cash_date) over(partition by year(calendar_day), month(calendar_day) order by calendar_day rows between unbounded preceding and current row) as max_cash_date
from dates_manager
where year(calendar_day)=2019
      and month(calendar_day)=11
)s
group by 
        calendar_day
        ,nvl(cash_date, max_cash_date)

如果要使用组件，则必须导入

export default class Complaints extends Component {

//assign initial value to state
state={
    propsObj : this.props
}


...
}

在内部组件类中，您必须使用import React, { Component } from "react";而不是this.props

稍后，如果您想更改状态，请使用props

Answer 3

每当定义状态或挂钩时，就将挂钩用作组件的状态。在组件顶部定义它。您已经在use-effect方法之后定义了。检查并让我知道它是否有效。

如何更新状态数组？

3 个答案: