Render props组件throws对象作为React子对象无效

Question

我正在尝试制作我自己的debounce输入元素，在那里我可以发送我需要的任何输入组件，如textarea和input，并使其debounce。我做了一个反抖动组件，看起来像这样：

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，_targetInt，_dispatchListeners，_disptchInstances，nativeEvent，type，target，currentTarget，eventPhase，bubbles，cancellable，timeStamp，defaultPrevented，isTrusted，isDefaultPrevented，isPropagationStopped｝(。如果您打算渲染子集合，请改用数组。

您可以在这里看到它的代码沙盒。我在这里做错了什么，我该怎么解决？

Answer 1

在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或TextArea组件，这意味着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 });
}

• 由于props和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 });
}