2

我试图在设置字符串时拆分它。React 给出错误“TypeError：未定义”，如果我尝试对其应用方法（如 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申请另一个）

4

3 回答 3

0

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

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

    useEffect( () => {
      setPhotoName(photoArray[0])
    },[photoArray])
于 2020-03-16T09:30:02.333 回答
0

您必须检查undefined，如下所示

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

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

useEffect( () => {
    setPhotoName(photoArray?.[0]?.split('_').join(' ')
  },[photoArray])
于 2020-03-16T09:05:58.567 回答
0

你缺少括号。尝试这个。

setPhotoName(photoArray[0].split('_').join(' '));
于 2020-03-16T09:20:38.630 回答