[英]Render props component throws Objects are not valid as a React child
I am trying to make my own debounce input element, where I could send whichever input component I need like textarea and input and make it debounce.我正在尝试制作我自己的去抖动输入元素,我可以在其中发送我需要的任何输入组件,例如 textarea 和 input 并使其去抖动。 I have made a debounceComponent that looks like this:
我制作了一个看起来像这样的 debounceComponent:
import { useState, useCallback } from "react";
import debounce from "lodash.debounce";
const useDebounce = (callback, delay) => {
const debouncedFn = useCallback(
debounce((...args) => callback(...args), delay),
[delay] // will recreate if delay changes
);
return debouncedFn;
};
function DebouncedInput(props) {
const [value, setValue] = useState(props.initialValue);
const debouncedSave = useDebounce(
(nextValue) => props.onChange(nextValue),
1000
);
const handleChange = (event) => {
const { value: nextValue } = event.target;
setValue(nextValue);
debouncedSave(nextValue);
};
return props.renderProps({ ...props, handleChange, value });
//return <textarea value={value} onChange={handleChange} rows={5} cols={50} />;
}
export default DebouncedInput;
And this is how I use it:这就是我使用它的方式:
<DebouncedInput
initialValue={value}
onChange={handleChange}
rows={5}
cols={50}
renderProps={(props) => <TextArea {...props} />}
/>
But, if I use it like that I get an error:但是,如果我像这样使用它,则会出现错误:
Objects are not valid as a React child (found: object with keys {dispatchConfig, _targetInst, _dispatchListeners, _dispatchInstances, nativeEvent, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, isDefaultPrevented, isPropagationStopped}).
对象作为 React 子对象无效(发现:具有键 {dispatchConfig、_targetInst、_dispatchListeners、_dispatchInstances、nativeEvent、type、target、currentTarget、eventPhase、bubbles、cancelable、timeStamp、defaultPrevented、isTrusted、isDefaultPrevented、isPropagationStopped} 的对象)。 If you meant to render a collection of children, use an array instead.
如果您打算渲染一组子项,请改用数组。
You can see the codesandbox for it here .你可以在这里看到它的代码和框。 What am I doing wrong here, how can I fix this?
我在这里做错了什么,我该如何解决?
In your DebouncedInput
component change the return statement.在您的
DebouncedInput
组件中更改 return 语句。
from从
return props.renderProps({ ...props, handleChange, value });
to到
return props.renderProps({ ...props, onChange: handleChange, value });
import { useState, useCallback } from "react";
import debounce from "lodash.debounce";
const useDebounce = (callback, delay) => {
const debouncedFn = useCallback(
debounce((...args) => callback(...args), delay),
[delay] // will recreate if delay changes
);
return debouncedFn;
};
function DebouncedInput(props) {
const [value, setValue] = useState(props.initialValue);
const debouncedSave = useDebounce(
(nextValue) => props.onChange(nextValue),
1000
);
const handleChange = (event) => {
const { value: nextValue } = event.target;
setValue(nextValue);
debouncedSave(nextValue);
};
return props.renderProps({ ...props, onChange: handleChange, value });
}
export default DebouncedInput;
Also, instead of spreading all the props to the component, pass only the props that are relevant to the input element.此外,不是将所有 props 传播到组件,而是只传递与 input 元素相关的 props。 So, in this case when calling
props.renderProps({ ...props, onChange: handleChange, value })
all the props that's being received by DebouncedInput
component are directly passed to the input
or TextArea
component which means renderProps
is also being passed.因此,在这种情况下,当调用
props.renderProps({ ...props, onChange: handleChange, value })
所有这一切由接收的道具DebouncedInput
构件直接传递到input
或TextArea
该装置部件renderProps
也被传递。 But in general input
or TextArea
might not have initialValue
, renderProps
as props, that will throw a warning.但在一般情况下
input
或TextArea
可能没有initialValue
, renderProps
作为道具,这会引发警告。
There are different ways of in order not to get such warnings, below is one of the way有多种方法可以避免收到此类警告,以下是其中一种方法
DebouncedInput
and the props of input component as rest
parameterDebouncedInput
并将输入组件的 props 作为rest
参数function DebouncedInput({initialValue, renderProps, onChange, ...rest}) {
const [value, setValue] = useState(initialValue);
const debouncedSave = useDebounce(
(nextValue) => onChange(nextValue),
1000
);
const handleChange = (event) => {
const { value: nextValue } = event.target;
setValue(nextValue);
debouncedSave(nextValue);
};
return renderProps({ ...rest, onChange: handleChange, value });
}
inputProps
and passing the same through renderProps
.inputProps
并通过inputProps
传递相同的renderProps
。<DebouncedInput
initialValue={value}
onChange={handleChange}
renderProps={(props) => <TextArea {...props} />}
inputProps={{rows:5, cols:50}}
/>
function DebouncedInput(props) {
const [value, setValue] = useState(props.initialValue);
const debouncedSave = useDebounce(
(nextValue) => props.onChange(nextValue),
1000
);
const handleChange = (event) => {
const { value: nextValue } = event.target;
setValue(nextValue);
debouncedSave(nextValue);
};
return props.renderProps({ ...props.inputProps, onChange: handleChange, value });
}
props
and the component
also from the same place, you can do it in a simple way like belowprops
和component
,因此您可以通过如下简单的方式进行 <DebouncedInput
initialValue={value}
onChange={handleChange}
renderProps={(props) => <TextArea {...props} rows={5} cols={50}/>}
/>
function DebouncedInput(props) {
const [value, setValue] = useState(props.initialValue);
const debouncedSave = useDebounce(
(nextValue) => props.onChange(nextValue),
1000
);
const handleChange = (event) => {
const { value: nextValue } = event.target;
setValue(nextValue);
debouncedSave(nextValue);
};
return props.renderProps({ onChange: handleChange, value });
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.