Как применить метод к строке при установке состояния, реагировать на хуки

Question

Я пытаюсь разбить строку во время ее установки. React выдает ошибку «Ошибка типа: не определена», если я пытаюсь применить к ней метод (например, string.split («_»))

Но если я не пытаюсь применить метод, строка отображается правильно. Как можно добиться применения метода перед установкой состояния?

  const [data, setData] = useState([]);
  const [photoArray, setPhotoArray] = useState([]);
  const [photoNum, setPhotoNum] = useState(0);
  const [photoName, setPhotoName] = useState("");

  useEffect( () => {
    const fetchData = async () => {
      const result = await axios(
        {
            url: 'http://localhost:1000',
            method: 'GET',
            },
        );
      const result2 = await axios(
        {
            url: 'https://someurl.com',
            method: 'GET'
        },
      )
        setData(result2.data.items)

      }
    fetchData();
  }, []);

  useEffect( () => {
    setPhotoArray(data.map( photo => photo.name))
  },[data])

  useEffect( () => {
    //This doesn't work
    setPhotoName(photoArray[0].split('_').join(' ')
    //This works:
    // setPhotoName(photoArray[0])
  },[photoArray])

Кроме того, правильно ли я использую useEffect? (3 раза, каждый раз, когда один setSate применяет другой)

Answer 1

вам не хватает скобок. попробуйте это.

setPhotoName(photoArray[0].split('_').join(' '));

Answer 2

Я пытался установить setState без, ну, setState. Решением было применить метод split () при фактической установке состояния этого массива.

    useEffect( () => {
      setPhotoArray(data.map(photo => photo.name.split('_').join(' ')))
    },[data])

    useEffect( () => {
      setPhotoName(photoArray[0])
    },[photoArray])

Answer 3

Вы должны проверить на undefined, как показано ниже

useEffect( () => {
    setPhotoName(photoArray[0] ? photoArray[0].split('_').join(' ') : '')
  },[photoArray])

Если вы используете Typescript 3.7 или выше, вы можете использовать Optional Chaining и выполнить неопределенную проверку следующим образом.

useEffect( () => {
    setPhotoName(photoArray?.[0]?.split('_').join(' ')
  },[photoArray])