设置状态时如何将方法应用于字符串，反应钩子答案

【问题标题】：How to apply a method to a string when setting state, react hooks设置状态时如何将方法应用于字符串，反应钩子
【发布时间】：2020-06-27 09:07:26
【问题描述】：

我试图在设置字符串时拆分它。如果我尝试对其应用方法（如 string.split("_"))

，React 会给出错误“TypeError: is undefined”

但如果我不尝试应用该方法，则字符串会正确显示。可以实现在设置状态之前应用方法吗？

  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申请另一个）

【问题讨论】：

您必须检查photoArray[0] 不是undefine。

标签： reactjs react-hooks use-effect use-state

【解决方案1】：

您必须检查undefined，如下所示

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

如果您使用的是 Typescript 3.7 或更高版本，您可以使用 Optional Chaining 并像这样进行未定义检查。

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

【讨论】：

【解决方案2】：

你缺少括号。试试这个。

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

【讨论】：

【解决方案3】：

我试图在没有 setState 的情况下设置状态。解决方案是在实际设置该数组的状态时应用 split() 方法。

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

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

【讨论】：