-
글쓴이글
-
2022년 1월 6일 09:37 #23885
rudgks참가자import React, { useState } from 'react';
import './App.css'
import Data from './data'
import axios from 'axios'function App() {
let [data, data1] = useState(Data)
function ax() {
axios.get('https://codingapple1.github.io/vue/more0.json').then((e) => { data.push(e.data) })
}return (
<div className="App"><div className="header">
<ul className="header-button-left">
<li>Cancel</li>
</ul>
<ul className="header-button-right">
<li>Next</li>
</ul></div>
<Container data={data}></Container><div className="footer">
<ul className="footer-button-plus">
<input type="file" id="file" className="inputfile" />
<label for="file" className="input-plus" >+</label>
<button onClick={() => { ax() }} >더보기</button>
</ul>
</div></div>
)
}function Container(props) {
return <div>
<Post data={props.data} />
</div>
}function Post(props) {
let [like, like1] = useState([0, 0, 0])
function li1(i) {
let li2 = [...like]
li2[i] += 1
like1(li2)
}return props.data.map((a, i) => {
return <div className="post">
<div className="post-header">
<div className="profile" style={{ backgroundImage:url(${a.userImage})}}></div>
<span className="profile-name" >{a.name}</span>
</div>
<div className="post-body" style={{ backgroundImage:url(${a.postImage})}} />
<div className="post-content">
<p> {a.content}</p>
<p>{like[i]}</p><button onClick={() => { li1(i) }}>like</button>
<p><strong>{a.name}</strong></p>
<p className="date">{a.date}</p>
</div>
</div>
})
}export default App;
더보기 누르면 왜작동안하는거죠.. 그리고 data.push(e.data) 한뒤 data로그 띄워보면
(13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {name: 'Kim Hyun', userImage: 'https://placeimg.com/100/100/arch', postImage: 'https://placeimg.com/640/480/arch', likes: 36, date: 'May 15', …}
1: {name: 'John Doe', userImage: 'https://placeimg.com/200/200/people', postImage: 'https://placeimg.com/640/480/people', likes: 20, date: 'Apr 20', …}
2: {name: 'Minny', userImage: 'https://placeimg.com/100/100/animals', postImage: 'https://placeimg.com/640/480/animals', likes: 49, date: 'Apr 4', …}
3: {name: 'David', userImage: 'https://placeimg.com/100/100/tech', postImage: 'https://placeimg.com/640/480/tech', likes: 5, date: 'July 25', …}
4: {name: 'David', userImage: 'https://placeimg.com/100/100/tech', postImage: 'https://placeimg.com/640/480/tech', likes: 5, date: 'July 25', …}
5: {name: 'David', userImage: 'https://placeimg.com/100/100/tech', postImage: 'https://placeimg.com/640/480/tech', likes: 5, date: 'July 25', …}
6: {name: 'David', userImage: 'https://placeimg.com/100/100/tech', postImage: 'https://placeimg.com/640/480/tech', likes: 5, date: 'July 25', …}
7: {name: 'David', userImage: 'https://placeimg.com/100/100/tech', postImage: 'https://placeimg.com/640/480/tech', likes: 5, date: 'July 25', …}
8: {name: 'David', userImage: 'https://placeimg.com/100/100/tech', postImage: 'https://placeimg.com/640/480/tech', likes: 5, date: 'July 25', …}
9: {name: 'David', userImage: 'https://placeimg.com/100/100/tech', postImage: 'https://placeimg.com/640/480/tech', likes: 5, date: 'July 25', …}
10: {name: 'David', userImage: 'https://placeimg.com/100/100/tech', postImage: 'https://placeimg.com/640/480/tech', likes: 5, date: 'July 25', …}
11: {name: 'David', userImage: 'https://placeimg.com/100/100/tech', postImage: 'https://placeimg.com/640/480/tech', likes: 5, date: 'July 25', …}
12: {name: 'David', userImage: 'https://placeimg.com/100/100/tech', postImage: 'https://placeimg.com/640/480/tech', likes: 5, date: 'July 25', …}
length: 13
[[Prototype]]: Array(0) 왜 이리나오는거죠??2022년 1월 6일 09:41 #23890
codingapple키 마스터vue 강의에서 쓰던 인스타그램용 데이터같군요
state 변경하려면 state에 직접 데이터를 추가하는게 아니라 state 변경함수를 쓰셔야합니다
2022년 1월 6일 11:45 #23907
rudgks참가자선생님 하나만 더 물어볼게요..
function App() {
let [data, data1] = useState(Data)
let [num, num1] = useState(0)
let [like, like1] = useState([0, 0, 0])// function da() {
// let datacopy = [...data]
// let nump = num + 1
// axios.get(https://codingapple1.github.io/vue/more${num}.json).then((e) => { datacopy.push(e.data) })// data1(datacopy);
// num1(nump);
// }
function ax() {
let nump = num + 1
axios.get(https://codingapple1.github.io/vue/more${num}.json).then((e) => { data1([...data, e.data]) })num1(nump);
}
return (
<div className="App"><div className="header">
<ul className="header-button-left">
<li>Cancel</li>
</ul>
<ul className="header-button-right">
<li>Next</li>
</ul>
</div><Container data={data} like={like} like1={like1}></Container>
<div className="footer">
<ul className="footer-button-plus">
<input type="file" id="file" className="inputfile" />
<label for="file" className="input-plus" >+</label>
<button onClick={() => { ax(); like.push(0) }} >더보기</button>
</ul>
</div></div>
)
}<button onClick={() => { ax(); like.push(0) }} >더보기</button>이쪽 부근, like값을 바꾸는건데 왜 like1함수없이 작동잘되는거죠??
2022년 1월 6일 14:51 #23925
rudgks참가자선생님 위질문은 쓸때없는 질문이엇던거 같네요
그 onclick( a() b()) 에서 a 함수 먼저 발동시킬려면 어떻게해야하죠??
2022년 1월 6일 16:00 #23938
codingapple키 마스터윗줄에 있는 코드가 항상 먼저 실행됩니다
근데 a와 b가 state 변경함수면 차례로 실행되는걸 보장할 순 없습니다 state변경함수는 비동기식으로 처리되는 함수들이라서요
-
글쓴이글
- 답변은 로그인 후 가능합니다.