从数组中提取 json

Question

我有一组用户，每个用户都有其数据。

我正在尝试提取用户编号 1 (id=1)，然后将其保存在 useState 中。之后想把它映射出来打印成li。

到目前为止我还没有成功。

import logo from './logo.svg';
import './App.css';
import './myCss.css';
import { useState ,useEffect } from 'react';
import axios from 'axios'
import Page2 from './Page2'



function Page3() {


  const [users,setusers] = useState([])
  const [user,setUser] = useState({})
  
  useEffect(() => {
    async function fetchData() {
      
      let resp = await axios.get("https://jsonplaceholder.typicode.com/users");
      setusers(resp.data); 
    }
    fetchData();
  }, []);

// 在这个函数中我尝试打印信息

 const getData = () =>
  {
    let myUser2 = users.filter(x=>x.id==1)
    setUser(myUser2)

    {
      user.map((item,index)=>
      {
        return <li key = {index}>{item}</li>
      })
    }
  }


  return (
    <div className = "styles">

      <input type = "button" value = "Get Data for comp 1" onClick = {getData}/>
    </div>
  );
}

export default Page3;

Answer 1

首先我有一个问题，为什么要映射一个只包含一个值的状态。我认为这没有意义，但是如果您要在用户状态中存储更多信息，您可以尝试以下操作：

const getData = () => {
  let myUser2 = users.filter(x=>x.id==1)
  setUser(myUser2)
}

const printUser = user.map((item, index) => <li key={item + index}>{item}</li>

  return (
    <div className = "styles">
      <input type = "button" value = "Get Data for comp 1" onClick = {getData}/>
      <ul>
      {printUser && printUser}
      </ul>
    </div>
  );
}

export default Page3;

Answer 2

您不能在 getData 中打印数据，这是一个事件函数。相反，您应该将它添加到 JSX。

此外，user是单个用户，users是用户列表。 filter 不适合您寻找单个用户的情况，我建议您改用 find。 find 会 return 一个对象，所以你不需要使用 map 来渲染。

//`user` is an empty object, so we need to make sure it has data inside `user` with `Object.keys`
{user && Object.keys(user) > 0 && <li key={user.name}>{user.name}</li>)}

完全可能的修改

function Page3() {


  const [users,setusers] = useState([])
  const [user,setUser] = useState({})
  
  useEffect(() => {
    async function fetchData() {
      
      let resp = await axios.get("https://jsonplaceholder.typicode.com/users");
      setusers(resp.data); 
    }
    fetchData();
  }, []); 
 
  const getData = () =>
  {
    let myUser2 = users.find(x=>x.id==1) 
    setUser(myUser2)
  }


  return (
    <div className = "styles">
      <input type = "button" value = "Get Data for comp 1" onClick = {getData}/>
      <ul>
         {user && Object.keys(user) > 0 && <li key={user.name}>{user.name}</li>)}
      </ul>
    </div>
  );
}

export default Page3;

从数组中提取 json

Extracting json from an array

reactjs

react-hooks