如何在 React Hooks 中修改 prop 并将其设置为初始状态?

Question

我得到一个道具text，它是字符串。我需要修剪此文本并将其传递给组件状态。怎么做？以旧的方式，我可以使用componentDidMount函数。现在我尝试使用useEffect()钩子，但它不起作用。"无法读取 null 的属性'子字符串'"。我做错了什么？

export const ReadMore: React.FC<IReadMoreProps> = ({
text, characterLimit,
}) => {
const [textValue, trimText] = useState(text);
useEffect(() => {
trimText(text.substring(0, characterLimit));
});
return (
<>
{textValue}
</>
);
};

Answer 1

问题出在您共享的代码之外。(请参阅沙盒 https://codesandbox.io/s/lucid-fire-e3w4w(

挂载组件时，文本属性必须为空。

Answer 2

我认为这可能是一个类型问题。试试这个：

export const ReadMore: React.FC<IReadMoreProps> = ({
text, characterLimit,
}) => {
const [textValue, trimText] = useState(text);
useEffect(() => {
trimText(text.toString().substring(0, characterLimit));
}, [text]);
return (
<>
{textValue}
</>
);
};

希望这对你有用。

Answer 3

在这种情况下，您不需要状态。你可以做这样的事情。

export const ReadMore: React.FC<IReadMoreProps> = ({
text, characterLimit,
}) => {
const [showMore, setShowMore] = useState(false);
const textValue = showMore ? text : (text || "").substring(0, characterLimit);
return (
<>
{textValue}
</>
);
};