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

Question

I get a prop text , which is string. I need to trim this text and pass it to component state. How to do this? In the old way I could use componentDidMount function. Now I try with useEffect() hook but it doesn't work. "Cannot read property 'substring' of null". What am I doing wrong?

export const ReadMore: React.FC<IReadMoreProps> = ({
 text, characterLimit,
}) => {

const [textValue, trimText] = useState(text);

useEffect(() => {
  trimText(text.substring(0, characterLimit));
});

return (
  <>
   {textValue}
  </>
 );
};

Answer 1

You don't need state in this case. You can do something like this.

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

Answer 2

I think that may be a type issue. Try this:

export const ReadMore: React.FC<IReadMoreProps> = ({
 text, characterLimit,
}) => {

const [textValue, trimText] = useState(text);

useEffect(() => {
  trimText(text.toString().substring(0, characterLimit));
}, [text]);

return (
  <>
   {textValue}
  </>
 );
};

Hope this works for you.

Answer 3

The problem is outside the code you shared. (see sandbox https://codesandbox.io/s/lucid-fire-e3w4w )

text prop must be null when the component is mounted.