Свойство status данных JSON ниже не будет отображаться в таблице всякий раз, когда я ввожу новые данные по определенному индексу. Кажется, мой код отображает только свойства status данных, которые изначально были в JSON, но не тех, которые добавляются. Ниже размещены JSON и коды для add_data, add_button и компонентов таблицы.

JSON (я оставил JSON коротким по понятным причинам, но другие свойства в каждом из ключей grievance и services: serial_number, name, date, issue и status, как вы можете видеть в следующей таблице)

[
    {
        "district": "Kolkata",
        "ward_no": [
            {
                "ward": "6",
                "grievance": [
                    {"status": "open"}
                ],
                "services": [
                    {"status": "pending"}
                ]
            },
            {
                "ward": "7",
                "grievance": [
                    {"status": "open"}
                ],
                "services": [
                    {"status": "closed"}
                ]
            },
            {
                "ward": "9",
                "grievance": [
                    {"status": "open"}
                ],
                "services": [
                    {"status": "pending"}
                ]
            }
        ]
    },
    {
        "district": "Hooghly",
        "ward_no": [
            {
                "ward": "10",
                "grievance": [
                    {"status": "pending"}
                ],
                "services": [
                    {"status": "pending"}
                ]
            },
            {
                "ward": "11",
                "grievance": [
                    {"status": "open"}
                ],
                "services": [
                    {"status": "closed"}
                ]
            },
            {
                "ward": "12",
                "grievance": [
                    {"status": "pending"}
                ],
                "services": [
                    {"status": "open"}
                ]
            }
        ]
    }
]

add_data.jsx (Это форма для ввода данных. Опять же, чтобы этот вопрос не стал слишком длинным, я показал только код, принимающий ввод для статуса. Чтобы добавить, статус выбирается из раскрывающегося списка. )

const AddDataScreen = () => {
    const [openState, setOpenState] = useState(false);
    const [stateDropdown, setStateDropdown] = useState('');

    const onStatusSelectValue = (value) => {
        setStateDropdown(value);
        setOpenState(!openState);
    }

    return (
        <div>
            <div>
                <label>Status</label>
                <div className="blockStatusDrop">
                    <div className="statusSelectDropdown">
                        <div className="statusSearchBox">
                            {!stateDropdown ? "Set Status" : stateDropdown}
                        </div>
                        <div className="searchStatusIcon" onClick={() => setOpenState(prev => !prev)}>
                            {openState ? <GoTriangleUp size={"22px"} /> : <IoMdArrowDropdown size={"30px"} />}
                        </div>
                    </div>
                    <div className={openState ? "statusSelectedOption" : "statusOption"}>
                        <div onClick={() => onStatusSelectValue("open")}>Open</div>
                        <div onClick={() => onStatusSelectValue("pending")}>Pending</div>
                        <div onClick={() => onStatusSelectValue("closed")}>Closed</div>
                    </div>
                </div>
            </div>
            <div className="buttonContainer">
                <div className="submitButton">
                    <AddButton state={stateDropdown} id={`00${serviceRequestNumber.length + 1}`} type={typeDropDown} district={districtDropdown} ward={wardDropdown} name={name} issue={issue} description={description} ></AddButton>
                </div>
                <div className="resetButton" onClick={resetForm}>Reset</div>
            </div>
        </div>
    );
}

export default AddDataScreen;

add_button.jsx (Это компонент AddButton, который упрощает вставку данных в определенный индекс. Свойства с именами district, ward и type из компонента AddDataScreen используются для поиска индекса, в который должны быть вставлены данные. Обратите внимание, что props.state - это значение state, и, как ни странно, когда я console.log (props.state) проверяю, было ли значение выбранный из предыдущего компонента, он показывает выбранный вариант из раскрывающегося списка, снимок экрана которого приведен ниже)

const AddButton = (props) => {

    const query = {               //The query parameters
        district: props.district,
        ward: props.ward,
        category: props.type
    }

    console.log(props.state)
    
    const insertData = {
        serial_number: props.id,
        name: props.name,
        date: new Date().toISOString(),
        issue: props.issue,
        description: props.description.split(/[,.]/),
        state: props.state
    };
    
    //This is where the filtering happens to find the index 
    const districtData = dummyData.find(value => value.district === query.district);

    const submitData = () => {
        //This is where the data is getting pushed
        if (districtData) {
            const wardData = districtData.ward_no.find(value => value.ward === query.ward);
            if (wardData) {
                wardData[query.category.toLowerCase()].push(insertData);
            }
        }
        console.log(dummyData);
    }

    return (
        <div className="submitAddButton" onClick={submitData}>Submit</div>
    );
}

export default AddButton;

enter image description here

На этом снимке экрана вы можете видеть, что статус новых данных (например, Бруно Фернандес) действительно имеет значение, которое говорит «открытые», что и есть то, что было выбрано.

enter image description here

Наконец, когда дело доходит до отображения этих данных в таблице, вот и результат. Статус не отображается. введите описание изображения здесь

Table.jsx

const Table = (props) => {
    const data = [];
    const history = useHistory();

    const [tableData, setTableData] = useState(data)

    useEffect(() => {
        setTableData(props.buttonValue)
    }, [props.buttonValue]);

    const tableDataPage = () => {
        history.push("/tableData")
    };

    return (
        <div className="tableDataList">
            {!tableData ? "" : <table className="serviceRequestList">
                <tbody>
                    <tr>
                        <th style={{ width: "5%" }}>Serial Number<span><ImFilter size={"12px"} /></span></th>
                        <th>Name<span><ImFilter size={"12px"} /></span></th>
                        <th>Date<span><ImFilter size={"12px"} /></span></th>
                        <th>Issue<span><ImFilter size={"12px"} /></span></th>
                        <th>Status<span><ImFilter size={"12px"} /></span></th>
                    </tr>
                    {tableData.map((value, key) => (
                        <tr key={key} onClick={tableDataPage}>
                            <td>{value.serial_number}</td>
                            <td>{value.name}</td>
                            <td>{value.date}</td>
                            <td>{value.issue}</td>
                            <td>{value.status}</td>
                        </tr>
                    ))}
                </tbody>
            </table>}
        </div>
    );
}

export default Table;
0
coolhack7 28 Ноя 2021 в 01:18

1 ответ

Лучший ответ

AddButton

Судя по вашему снимку экрана, ваши dummyData должны иметь ключ в качестве статуса, но в ваших insertData вы используете ключ состояния. Проблема может заключаться в несоответствии ключей.

const insertData = {
        serial_number: props.id,
        name: props.name,
        date: new Date().toISOString(),
        issue: props.issue,
        description: props.description.split(/[,.]/),
        status: props.state
};
1
Amit Rohan 28 Ноя 2021 в 01:27
Честно говоря, мне смешно. По сути, все это время передо мной был открыт ответ. В Wish Stack Overflow были смайлики, чтобы люди могли выразить свои чувства. Спасибо большое.
 – 
coolhack7
28 Ноя 2021 в 01:37