如何解决渲染错误undefined is not a function

Question

我的 API 返回一个由四个对象组成的数组，如下所示：

res = [ { tutor 1 }, { tutor 2 }, { tutor 3 }, { tutor 4 } ]

我使用 foreach 数组方法循环遍历它们，以返回一个包含每个导师信息的视图，但有些问题。

我明白了：

渲染错误未定义不是函数（靠近'...responsee.foreach'）

export default  function TutorsScreen ({ navigation }) {

    let [response, setResponse] = useState({});

    useEffect(()  =>  
        fetch("https://elitestudents.link/wp-json/wp/v2/users?role=lp_teacher")
        .then(res => res.json())
        .then((jsoon)=>{
            setResponse(jsoon)
            console.log(jsoon)}
            ))
            
return(
    response.forEach(t => {
        return(
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text
                onPress={() => navigation.navigate('Home')}
                style={{ fontSize: 26, fontWeight: 'bold' }}> 
              tutors names : {t.name} </Text>
             </View>
        )}))}

Answer 1

这种情况仅发生在第一个渲染周期。在

useEffect

中执行的函数是异步的，将在挂载时执行。但是，视图将在获取数据之前呈现。

因此，

response

状态是一个初始空对象。对于空对象，不存在

map

函数。

我将使用

undefined

作为初始状态并返回

null

直到获取数据。

    const [response ,setResponse] =useState();

    useEffect(()  => {
      fetch("https://elitestudents.link/wp-json/wp/v2/users?role=lp_teacher")
        .then(res => res.json())
        .then((jsoon) => {
            setResponse(jsoon)
            console.log(jsoon)
        })
    }, [])

      if (!response) {
        return null
      }
  return (
    <View>
          {response.map(t => {
        return(
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text
                onPress={() => navigation.navigate('Home')}
                style={{ fontSize: 26, fontWeight: 'bold' }}> 
              tutors names : {t.name} </Text>
             </View>
        )})}
    </View>
  );

编辑： 使用空数组可能会被认为更优雅（空数组定义了映射函数）。在这种情况下，我们不需要 if 语句。

const [response ,setResponse] =useState([]);

    useEffect(()  => {
      fetch("https://elitestudents.link/wp-json/wp/v2/users?role=lp_teacher")
        .then(res => res.json())
        .then((jsoon) => {
            setResponse(jsoon)
            console.log(jsoon)
        })
    }, [])


  return (
    <View>
          {response.map(t => {
        return(
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text
                onPress={() => navigation.navigate('Home')}
                style={{ fontSize: 26, fontWeight: 'bold' }}> 
              tutors names : {t.name} </Text>
             </View>
        )})}
    </View>
  );

P.S.：在你的问题中，你使用的是

forEach

。这不会返回

Views

。正如评论已经建议的那样，使用

map

函数（尽管这不是问题的根源）。

Answer 2

只需更改您在状态中设置的响应

setResponse(jsoon) => setResponse(jsoon[0])

并使用以下代码重试 ->

const [响应，setResponse] =useState([]);

useEffect(()  => {
  fetch("https://elitestudents.link/wp-json/wp/v2/users?role=lp_teacher")
    .then(res => res.json())
    .then((jsoon) => {
        setResponse(jsoon[0])
        console.log(jsoon)
    })
}, [])




return (
    <View>
          {response.map(t => {
        return(
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text
                onPress={() => navigation.navigate('Home')}
                style={{ fontSize: 26, fontWeight: 'bold' }}> 
              tutors names : {t.name} </Text>
             </View>
        )})}
    </View>
  );