Как изменить реквизит и установить его в исходное состояние в React Hooks?

Question

Я получаю реквизит text, который является строкой. Мне нужно обрезать этот текст и передать его в состояние компонента. Как это сделать? По-старому я мог использовать функцию componentDidMount. Теперь я пытаюсь с useEffect() крючком, но он не работает. Msgstr "Невозможно прочитать свойство 'substring' из null". Что я делаю неправильно?

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

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

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

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

Answer 1

Я думаю, что это может быть проблема типа. Попробуйте это:

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

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

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

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

Надеюсь, это работает для вас.

Answer 2

Проблема за пределами кода, которым вы поделились. (см. песочницу https://codesandbox.io/s/lucid-fire-e3w4w)

текст проп должен быть нулевым, когда компонент смонтирован.

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}
  </>
 );
};