React native 响应本机API调用

如何在页面下方的代码中显示API调用的结果

完成后的{data.payrollid}未显示任何值。ie：文本只显示“完成”，后面没有值

我返回的JSON看起来像这样

{"status_code":200,"payrollid":10,"message":"Success"}

当我console.log（data）时，我可以看到fetch工作了，并且可以看到我的JSON数组

下面是我的本地代码

 const [isLoading, setLoading] = useState(true);
    const [data, setData] = useState([]);

    useEffect(() => {
        fetch('https://www.mywebsite.ca/api/test.php')
            .then((response) => response.json())
            .then((data) => console.log(data))
            .catch((error) => console.error(error))
            .finally(() => setLoading(false));
    }, []);

  return (
      <>
      <View>
          {isLoading ? <Text>Loading...</Text> : <Text>Complete {data.payrollid}</Text> }
      </View>
    <View style={styles.container}>
      <Text>This is my new app.</Text>
      <Text>Some text</Text>
      <StatusBar style="auto" />
    </View>
      </>
  );

const[isLoading，setLoading]=useState（true）；
const[data，setData]=useState（[]）；
useffect（（）=>{
取（'https://www.mywebsite.ca/api/test.php')
.then（（response）=>response.json（））
.然后（（数据）=>console.log（数据））
.catch（（错误）=>console.error（错误））
.最后（（）=>setLoading（false））；
}, []);
返回(
{isLoading？正在加载…：完成{data.payrollid}
这是我的新应用。
一些文本
);

您需要以数据状态保存数据

const [data, setData] = useState({});

useEffect(() => {
    fetch('https://www.mywebsite.ca/api/test.php')
        .then((response) => response.json())
        .then((data) => setData(data))
        .catch((error) => console.error(error))
        .finally(() => setLoading(false));
}, []);

---

由于您获得了一个对象，所以将原始状态切换为对象。

您需要以数据状态保存数据

const [data, setData] = useState({});

useEffect(() => {
    fetch('https://www.mywebsite.ca/api/test.php')
        .then((response) => response.json())
        .then((data) => setData(data))
        .catch((error) => console.error(error))
        .finally(() => setLoading(false));
}, []);

---

由于获取对象会将原始状态切换为对象。

您的代码应该如下所示：

const [isLoading, setLoading] = useState(true);
    const [data, setData] = useState({});

    useEffect(() => {
        fetch('https://www.mywebsite.ca/api/test.php')
            .then((response) => response.json())
            .then((data) => setData(data))
            .catch((error) => console.error(error))
            .finally(() => setLoading(false));
    }, []);

  return (
    <>
     <View>
        {isLoading ? <Text>Loading...</Text> : 
          <Text>Complete{data.payrollid}.</Text>
        }
    </View>
    <View style={styles.container}>
      <Text>This is my new app.</Text>
      <Text>Your Text</Text>
      <StatusBar style="auto" />
    </View>
  </>
  );

const[isLoading，setLoading]=useState（true）；
const[data，setData]=useState（{}）；
useffect（（）=>{
取（'https://www.mywebsite.ca/api/test.php')
.then（（response）=>response.json（））
.然后（（数据）=>setData（数据））
.catch（（错误）=>console.error（错误））
.最后（（）=>setLoading（false））；
}, []);
返回(
{正在加载？正在加载…：
完成{data.payrollid}。
}
这是我的新应用。
你的文字
);

您的代码应该如下所示：

const [isLoading, setLoading] = useState(true);
    const [data, setData] = useState({});

    useEffect(() => {
        fetch('https://www.mywebsite.ca/api/test.php')
            .then((response) => response.json())
            .then((data) => setData(data))
            .catch((error) => console.error(error))
            .finally(() => setLoading(false));
    }, []);

  return (
    <>
     <View>
        {isLoading ? <Text>Loading...</Text> : 
          <Text>Complete{data.payrollid}.</Text>
        }
    </View>
    <View style={styles.container}>
      <Text>This is my new app.</Text>
      <Text>Your Text</Text>
      <StatusBar style="auto" />
    </View>
  </>
  );

const[isLoading，setLoading]=useState（true）；
const[data，setData]=useState（{}）；
useffect（（）=>{
取（'https://www.mywebsite.ca/api/test.php')
.then（（response）=>response.json（））
.然后（（数据）=>setData（数据））
.catch（（错误）=>console.error（错误））
.最后（（）=>setLoading（false））；
}, []);
返回(
{正在加载？正在加载…：
完成{data.payrollid}。
}
这是我的新应用。
你的文字
);

@davies first Think first

在react-native中不是有效的标记。@davies first Think first

在react-native中不是有效的标记。谢谢，这样行得通。谢谢，这样行得通。