Почему не могу вытащить данные из State?

Question

[danila_prokopenko]

У меня есть стейт, значения, которые я взял из бд. Данные, которые я взял - имеются, видно по консоли и самому стейту, но почему-то я не могу отобразить их на странице.

const User = () => {
  // const [user, setUser] = useState({
  //   movieName: "",
  //   movieReview: ""
  // });

  const [user, setUser] = useState([]);

  const { id } = useParams();

  useEffect(() => {
    loadUser();
  }, []);

  const loadUser = async () => {
    const result = await axios.get(`http://localhost:3002/api/${id}`);
    setUser(result.data);
    console.log("Стейт юсера ", result.data)
  };



  return (
    <div className="container py-4">
      <Link className="btn btn-primary" to="/">
        back to Home
      </Link>
      <h1 className="display-4">User Id: {id}</h1>
      <hr />
      <ul className="list-group w-50">
        <li className="list-group-item">movieName: {user.movieName}</li>
        <li className="list-group-item">movieReview: {user.movieReview}</li>
      </ul>
    </div>
  );
};

код рабочего подключения

app.get("/api/:id", (req, res) => {
    console.log("Fetching user with id: " + req.params.id)
  
  const userId = req.params.id
  const queryString = "SELECT * FROM `movies_reviews` where id = ?"
  db.query(queryString, [userId], (err, rows, fields) => {
    if (err) {
      console.log("Failed to query for users: " + err)
      res.sendStatus(500)
      return
    }
    console.log("I think we fetched users successfully")
    console.log("ID is: ", req.params.id)
  
    const users = rows.map((row) => {
      return {id:row.id, movieName: row.movieName, movieReview: row.movieReview}
    })
  
    res.json(users)
  })
    //res.end()
  })

вот то, что я вывожу на главной странице

const Home = () => {
  const [users, setUser] = useState([]);

  useEffect(() => {
    loadUsers();
  }, []);

  const loadUsers = async () => {
    const result = await axios.get("http://localhost:3002/api/get");
    setUser(result.data);
    console.log("Стейт пользователей",  result.data)
  };


  return (
    <div className="container">
      <div className="py-4">
        <h1>Home Page</h1>
        <table class="table border shadow">
          <thead class="thead-dark">
            <tr>
              <th scope="col">#</th>
              <th scope="col">id</th>
              <th scope="col">Name</th>
              <th scope="col">User Name</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            {users.map((user, index) => (
              <tr>
                <th scope="row">{index + 1}</th>
                <td>{user.id}</td>
                <td>{user.movieName}</td>
                <td>{user.movieReview}</td>
                <td>
                  <Link class="btn btn-primary mr-2" to={`/users/${user.id}`}>
                    View
                  </Link>
                  <Link
                    class="btn btn-outline-primary mr-2"
                    to={`/users/edit/${user.id}`}
                  >
                    Edit
                  </Link>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

И вот на главной, из стейта все выводиться хорошо, но почем-то не выводятся данные на страницу отдельного юзера, хотя сама информация имеется.

Comments

[Алексей Уколов]

Ошибку из консоли полностью покажите

[danila_prokopenko]

Алексей Уколов, вот, это на странице выбранного пользователя

[YavaDev]

danila_prokopenko, user это массив и у него нет свойств movieName и movieReview
Что бы пофиксить замените эту строку setUser(result.data); на эту setUser(result.data[0]);

const loadUser = async () => {
    const result = await axios.get(`http://localhost:3002/api/${id}`);
    setUser(result.data[0]); 
  };

[danila_prokopenko]

YavaDev, спасибо вам, выручили меня)

Answer 1

[Иван В]

Вы неверно выводите данные.
Запись {user.movieName} работала бы, если бы user был бы объектом:

user = { 
   movieName: "", 
   movieReview: ""
}

Но судя по консоли, стейт "user" - это массив из одного объекта.

user = [{ 
   movieName: "", 
   movieReview: ""
}]

Следовательно, вывести данные можно обратившись к массиву по индексу {user[0].movieName}.
Обратите внимание, что в работающем примере, прежде чем вывести данные {user.movieName}, массив users "мэпится" {users.map((user, index) => (...)}

Comments

[danila_prokopenko]

Хорошо, спасибо вам)