function ScheduleCalendar() {
const [data, setData] = React.useState({});
const schedule = useSelector((state) => state.schedule);
const loading = useSelector((state) => state.schedule.loading);
const dispatch = useDispatch();
useEffect(() => {
dispatch(scheduleActions.getById(scheduleId));
setData(schedule)
}, []);
Goodnight everyone I’ve been thinking over how to handle an issue I’ve been having, I’m hoping I could get pointed in the right direction. I’m working on app where users can create forms and user submit data the shape of the response is like this:
{
email_ghe73hs:{
label:”email address”,
value:”foo@bar.com”}}
Because each form is unstructured data I have to create the table column array and accessors for react table on the fly. This works great until the user updates a form and adds a new field this causes the accessor to throw an error due to previous responses objects not having the field that was created. The solutions I’ve come up with so far but haven’t tested is to:
A) Add a version number to the form whenever the form is updated and have the user select the form versions to populate the responses from this way the accessors generated will have consistent data to work with on every change.
B ) look at the latest response attributes and use js map to add the attributes to all earlier responses before passing the data to the React table for consistency.
C) Do B above but on the dB but I feel updating so many responses would be taxing to perform .
I was wondering if anyone would know what would be the best solution?
Can anyone find what's the case here?
The Action:
export const dologin = (payload, callback) => ({
type: publicConstants.DO_LOGIN_REQUEST,
payload,
callback
})Where the dispatch is made:
const mapDispatchToProps = (dispatch) => {
return bindActionCreators( { dologin }, dispatch)
};
export default connect(mapStateToProps, mapDispatchToProps)(Landpage);The root Saga:
const appSagas = ([
...publicSagas,
])
export default function* root() {
yield all ([
appSagas
])
}The case is that, while the request is done, nothing else happens - Not even the function is called. I know that I do not provide much, but if anyone has any idea, it will be much appreciated. Thanks!
Hi Everyone, is there any react package or an example similar to angular drag&drop boundary: https://stackblitz.com/angular/moyjdkjyojko?file=src%2Fapp%2Fcdk-drag-drop-boundary-example.ts???
You can use React RND https://www.npmjs.com/package/react-rnd
you can use its bound props to bound it to parent
Here is the boundary example: https://codesandbox.io/s/practical-dream-jp1su?file=/src/index.js
import './App.css';
const audioClips = [
{
keyCode: 81,
keyTrigger: 'Q',
id: 'Heater-1',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
},
{
keyCode: 87,
keyTrigger: 'W',
id: 'Heater-2',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
},
{
keyCode: 69,
keyTrigger: 'E',
id: 'Heater-3',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'
},
{
keyCode: 65,
keyTrigger: 'A',
id: 'Heater-4',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3'
},
{
keyCode: 83,
keyTrigger: 'S',
id: 'Clap',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3'
},
{
keyCode: 68,
keyTrigger: 'D',
id: 'Open-HH',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3'
},
{
keyCode: 90,
keyTrigger: 'Z',
id: "Kick-n'-Hat",
url: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'
},
{
keyCode: 88,
keyTrigger: 'X',
id: 'Kick',
url: 'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3'
},
{
keyCode: 67,
keyTrigger: 'C',
id: 'Closed-HH',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3'
},
];
function App() {
return (
<div className="App bg-info min-vh-100 text-white text-center">
<div id="drum-machine">
<h1>Drum Machine</h1>
{audioClips.map(clip => {
return <Pad key={clip.id} clip={clip} />
})}
</div>
</div>
);
}
function Pad({clip}){
React.useEffect(()=>{
document.addEventListener( 'keydown', handleKeyPress);
return ()=>{
document.removeEventListener( 'keydown', handleKeyPress)
}
},[])
const handleKeyPress= (e)=>{
if(e.keyCode === clip.keyCode)
playsound();
}
const playsound=()=>{
const audioTag = document.getElementById(clip.keyTrigger)
audioTag.currentTime = 0;
audioTag.play()
}
return(
<div onClick= {playsound} className="drum-pad btn btn-secondary p-4 m-3">
<audio className="clip" id={clip.keyTrigger} src={clip.url} />
{clip.keyTrigger}
</div>
)
}
export default App;React.useEffect(){} in thePadfunctional component, that:'React' is not defined no-undef```. Pls how do I go about solving this?
let [auth, setAuth] = useState([])
let fullColumn = [{
field: 'option',
filterIcon: filtered => <SettingOutlined style={{ fontSize: 16, verticalAlign: -3 }} />,
dataIndex: 'option',
align: 'center',
width: 60,
fixed: 'right',
filterDropdown: (params) => (
<DataGrid.Setting fullColumns={fullColumns} currentColumns={currentColumns} queryParams={{ menuId: menuId, tableId: menuId }} onChange={handleChangeColumns} {...params} />
),
render: (text, record) => {
let menu = null
menu = (
<Menu onClick={handleMenuClick}>
{
auth.includes('ADD') && <Menu.Item key="EDIT" record={record}>
{locale('编辑')}
</Menu.Item>
}
{
auth.includes('CHANGE') && <Menu.Item key="TRANSFORM" record={record}>
{locale('转为采购单')}
</Menu.Item>
}
</Menu>
)
return <DataGrid.Operation overlay={menu} />
}
}]
useEffect(() => {
// 异步请求
ajax({
success: function (response) {
setAuth(response)
}
})
}, [])
2 replies
Hi guys, I'm getting error while going back to previous page after updating the redux store: https://stackoverflow.com/questions/66853904/react-dom-error-when-going-back-after-updating-the-redux-store
can someone please help...
"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:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app"
const changeState = (index)=>{
console.log('change'+index);
const arrCopy = [...array];
arrCopy[index].config[0].isCompleted = "true";
setArr(arrCopy);
}
one silly question which puzzles me a bit I want to make wrapper function to do debounce for any called function, something like this
I want to use this inside redux actions to debounce any potential call
myDebounce(somefunction()).then()and myDebounce is function for whichI use deboucne-promise and tried to define it as something like
const myDebounce = fn => debounce(fn, 100)but this doesn't work properly, any other way to pass parametred function? did I miss something?