tiagofernandez / mui-querybuilder Goto Github PK

View Code? Open in Web Editor NEW

63.0 63.0 13.0 3.73 MB

Query builder for React applications based on Material UI v4.

License: MIT License

JavaScript 100.00%

material-ui querybuilder react

mui-querybuilder's People

Stargazers

Watchers

Forkers

omofolarin dinhnn xhendyagsx wurzziyoon lenamax2355 ashu177 lihongwang jedliu rebaz88 omeiza-workspace peterviergutz wlazlak

mui-querybuilder's Issues

Component does not update when filters state changes

when a state object is passed in as filters props, then the state object is updated, the querybuilder component does not update to reflect the new filters props.

In dynamic options example, http://tiagofernandez.com/mui-querybuilder/iframe.html?id=muiquerybuilder--supported-types&viewMode=docs#dynamic-options, the Button that updates filters state is

               <Button
                    color="primary"
                    disabled={loaded}
                    variant="outlined"
                    onClick={() => {
                        const updatedFilters = [...filters];
                         [
                            { label: "January", value: 1 },
                            { label: "February", value: 2 },
                            { label: "March", value: 3 },
                            { label: "April", value: 4 },
                            { label: "May", value: 5 },
                            { label: "June", value: 6 },
                            { label: "July", value: 7 },
                            { label: "August", value: 8 },
                            { label: "September", value: 9 },
                            { label: "October", value: 10 },
                            { label: "November", value: 11 },
                            { label: "December", value: 12 },
                        ].forEach(month => {
                            updatedFilters[0].options[0].options.push(month);
                        });
                        setFilters(updatedFilters);
                        setLoaded(true);
                    }}
                >

the problem with this example is the const updatedFilters = [...filters]; is making a shallow clone of the filters state so when the forEach function makes modifications to the inner object it is mutating the state. This is making the changes appear in the filters object. The setFilters(updatedFilters); does not make a difference.

To test this remove the setFilters(updatedFilters); line and it will still work.

Invalid hook call

Hi, facing an issue on below

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

Refer: https://codesandbox.io/s/musing-nobel-rfdqt?file=/src/App.js

need your help with solve this issue

Uncaught TypeError: Cannot add property id, object is not extensible

If I use the QueryBuilder with redux for query/setQuery instead of useState, the following error is thrown:
Uncaught TypeError: Cannot add property id, object is not extensible
Resulting in the page crashing.

The problem occurs here with this code:

mui-querybuilder/src/QueryBuilder.jsx

Lines 187 to 205 in f7dc0d9

 export function resetNodeIds(query, mode) { 

 const random = mode === "random"; 

 if (random) { 

 query.id = query.id || Math.random(); 

 } else { 

 delete query.id; 

 } 

 query.rules.map((rule) => { 

 if (random) { 

 rule.id = rule.id || Math.random(); 

 } else { 

 delete rule.id; 

 } 

 if (rule.rules) { 

 resetNodeIds(rule, mode); 

 } 

 return rule; 

 }); 

 return query;

react: 17.0.2
mui-querybuilder: 1.2.1

Invalid hook call, wrong react version?

Hello! I faced with next issue:

https://reactjs.org/warnings/invalid-hook-call-warning.html
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

In my project used react 17.0.2
"react": "^17.0.1",
"react-dom": "^17.0.1",

Do I need update react version for mui-builder too? Or this is can be other issue?

tiagofernandez / mui-querybuilder Goto Github PK

mui-querybuilder's People

Stargazers

Watchers

Forkers

mui-querybuilder's Issues

Component does not update when filters state changes

Invalid hook call

Uncaught TypeError: Cannot add property id, object is not extensible

Invalid hook call, wrong react version?

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	export function resetNodeIds(query, mode) {
	const random = mode === "random";
	if (random) {
	query.id = query.id \|\| Math.random();
	} else {
	delete query.id;
	}
	query.rules.map((rule) => {
	if (random) {
	rule.id = rule.id \|\| Math.random();
	} else {
	delete rule.id;
	}
	if (rule.rules) {
	resetNodeIds(rule, mode);
	}
	return rule;
	});
	return query;