Trouble updating React UseState Object with spread operator

Question

A context variable is fetched from a server to update the existing context of an element datatable.

const [eventdata, setEventData] = useState(null);.

The context object retrieved from the server is passed to the function applyContext. This function fires as expected with the correct context variable. The temporary Data object is in the expected format, with the same object keys as the eventdata constant.

However, trying to update the react state with setEventData and the spread operator does not appear to have any effect. The eventdata variable remains unchanged.

const applyContext = (
    (context) => {
        for (var x in context) {

            let tempData = {}
            tempData[x] = context[x]

            setEventData({
              ...eventdata,
              ...tempData
            });
        }
    });

Why is this operation not having the desired effect? The complete code for the element is below. Function logItemSelect uses a similar principle effectively.

export function EventDetailDataTable(props) {
    let params = useParams();
    let data_dict = {'detail_link': params.eventSlug, 'filters': null};
    const [event, setEvent] = useState(null);
    const [isLoading, setIsLoading] = useState(true);
    const [filters, setFilters] = useState(null);
    const [getfiltervals, setFilterVals] = useState({});
    const [filtersActive, setFiltersActive] = useState(null);

    const logItemSelect = (
        (name, event) => {
            // console.log('You clicked', event)
            // console.log('The Filter is', name)
            const tempValue = {}
            tempValue[name] = event
            setFilterVals({
              ...getfiltervals,
              ...tempValue
            });
            setFiltersActive(true)
            // console.log(filtersActive)
        });

    const applyContext = (
        (context) => {
            for (var x in context) {
                // console.log(x)

                let tempData = {}
                tempData[x] = context[x]

                console.log(tempData)
                setEvent({
                  ...event,
                  ...tempData
                });
            }
        });

    useEffect(() => {
        fetch("/front/api/", {
                method: "POST",
                credentials: "include",
                headers: {
                    "X-CSRFToken": token,
                    "Accept": "application/json",
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(data_dict),
            }).then(function(response) {
                return response.json()
            }).then(function(data) {
                setEvent(data.context)
                setFilters(data.context.filters)
                setFilterVals(data.context.defaultfilters)
                console.log('Data Fetched')

            }).catch(function(ex) {
                console.log("parsing failed", ex);
            });
        },
        [],
      );

    function applyFilters() {
        var data = {'detail_link': params.eventSlug, 'filters': getfiltervals};
        fetch("/front/api/", {
            method: "POST",
            credentials: "include",
            headers: {
                "X-CSRFToken": token,
                "Accept": "application/json",
                "Content-Type": "application/json"
            },
            body: JSON.stringify(data),
        }).then(function(response) {
            return response.json()
        }).then(function(data) {
            console.log('Filtered Data Fetched')
            console.log(data.context)
            applyContext(data.context)
            // console.log(data.context)
        }).catch(function(ex) {
            console.log("filter parsing failed", ex);
        });
    }

    if (event && filters) {
        // console.log(event)
        return (
            <div>
                <Table>
                    <thead>
                        <tr>
                            <th>{event.event_detail.home_team.team_name}</th>
                            <th>vs.</th>
                            <th>{event.event_detail.away_team.team_name}</th>
                        </tr>
                    </thead>
                    <tbody>
                        { Object.keys(event.home_stats).map((key) =>
                            <tr>
                                <td>{event.home_stats[key]}</td>
                                <td>{key}</td>
                                <td>{event.away_stats[key]}</td>
                            </tr>
                            )
                        }
                    </tbody>
                </Table>
                <FilterButtons buttonfilters={filters} onSelect={logItemSelect} apply={applyFilters} active={filtersActive}/>
            </div>
        );
    }

    return (
        <p>Event Detail Loading</p>
    );
}

Trouble updating React UseState Object with spread operator

0 Answers0