reactjs - 渲染道具组件抛出对象作为 React 子项无效
问题描述
我正在尝试制作自己的去抖动输入元素,我可以在其中发送我需要的任何输入组件,例如 textarea 和 input 并使其去抖动。我制作了一个如下所示的 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;
这就是我使用它的方式:
<DebouncedInput
initialValue={value}
onChange={handleChange}
rows={5}
cols={50}
renderProps={(props) => <TextArea {...props} />}
/>
但是,如果我这样使用它,我会得到一个错误:
对象作为 React 子级无效(发现:对象与键 {dispatchConfig、_targetInst、_dispatchListeners、_dispatchInstances、nativeEvent、type、target、currentTarget、eventPhase、bubbles、cancelable、timeStamp、defaultPrevented、isTrusted、isDefaultPrevented、isPropagationStopped})。如果您打算渲染一组子项,请改用数组。
您可以在此处查看它的代码和框。我在这里做错了什么,我该如何解决?
解决方案
在您的DebouncedInput
组件中更改 return 语句。
从
return props.renderProps({ ...props, handleChange, value });
到
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;
此外,不要将所有道具传播到组件,而是仅传递与输入元素相关的道具。因此,在这种情况下,当调用组件props.renderProps({ ...props, onChange: handleChange, value })
接收到的所有道具时,DebouncedInput
都直接传递给input
orTextArea
组件,这意味着renderProps
也正在传递。但总的来说input
,或者TextArea
可能没有initialValue
,renderProps
作为道具,那会引发警告。
为了不收到此类警告,有多种方法,以下是其中一种方法
- 将所需
DebouncedInput
的道具和输入组件的道具作为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 });
}
- 将所有与 input/TextArea 相关的道具传递到另一个对象中,如下所示。在这里,我传递了我想要作为输入组件的一部分发送的所有相关道具,我包装在里面
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 });
}
- 由于您从同一个地方传递 the
props
和 the ,因此您可以通过如下简单的方式进行操作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 });
}
推荐阅读
- javascript - 如何阻止人们分享您的网站页面链接?
- javascript - 我如何调用 add_to_cart jquery 函数到 php 以获取输入数量值
- netlogo - 如何找出 Y 发生的概率取决于 Netlogo 中的 X1 和 X2?Y , X1 和 X2 是海龟变量
- php - 为什么我不能在此查询中按名称排序?
- java - Java中包命名约定和项目管理的疑惑
- php - 我需要帮助设置新的日志文件
- r - 使用 .pull-left[] 在两列中的 Rmarkdown 不起作用两次
- javascript - 使用路径拆箱属性值
- linux - 显示路径中目录的详细信息 - bash 脚本分配
- elasticsearch - 在运行查询之前初始化 Elasticsearch SearchResponse 对象