Objects 作为 React child 无效，请改用数组

Question

我正在尝试使用 axios 从 json 请求中呈现名字和姓氏。

我收到标题中显示的以下错误。我已经包含了一个 snack example here 完全重现错误并添加了下面的代码。

谢谢

const plsWork = () => {
    // Make a request for a user with a given ID
   return axios.get('https://randomuser.me/api')
      .then(({data}) => {
        console.log(data);
        return data
      })
      .catch(err => {
        console.error(err);
      });
    
    }  
    
  const userName = (userInfo) => {
    const {name: {first, last}} = userInfo;
    return {first}, {last};
  }

export default function App() {
  const [data, setData] = React.useState(' ')
  const [userInfos, setUserInfos] = React.useState([]);
  

  
  React.useEffect(() => {
    plsWork().then(randomData => {
      setData(JSON.stringify(randomData, null, 4) || 'No user data found.')
      setUserInfos(randomData.results)
    })
  }, []);

  return (
    <View>
    <ScrollView>
      {
        userInfos.map((userInfo, idx) => (
          <Text key={idx}>
            {userName(userInfo)}
          </Text>
        ))
      }
      <Text style={{color: 'black', fontSize: 15}}>
        {data}
      </Text>
    </ScrollView>
    </View>
  );
}

Answer 1

您必须在 userName 函数中 return 一个 React Component。

第 21 行：从 return {first}, {last} 更改为 return <>{first}, {last}</>。

应该有用！这是编辑的代码：snack expo

Objects 作为 React child 无效，请改用数组

Objects are not valid as a React child, use an array instead

reactjs

react-native