개체가 React 하위 개체로 유효하지 않습니다(찾은 개체: [object Promise]).

개체가 React 하위 개체로 유효하지 않습니다(찾은 개체: [object Promise]).

배열을 통해 매핑하여 투고 목록을 렌더링하려고 합니다.전에도 여러 번 해봤지만 왠지 모르게

renderPosts = async () => {
    try {
      let res = await axios.get('/posts');
      let posts = res.data;
      return  posts.map((post, i) => {
        return (
          <li key={i} className="list-group-item">{post.text}</li>
        );
      });
    } catch (err) {
      console.log(err);
    }
  }

  render () {
    return (
      <div>
        <ul className="list-group list-group-flush">
          {this.renderPosts()}
        </ul>
      </div>
    );
  }

내가 얻는 건

발견되지 않은 오류: 개체가 React 하위 개체로 유효하지 않습니다(찾은 개체: [object Promise]).하위 집합을 렌더링하려는 경우 대신 배열을 사용하십시오.

renderPosts에서 반환된 데이터를 확인했더니 값이 올바르고 약속 없는 어레이입니다.이게 무슨 일이야?

비동기 기능 컴포넌트를 작성할 때도 같은 에러 메시지가 표시되었습니다.기능 컴포넌트는 비동기일 수 없습니다.

const HelloApp = async (props) =>  { //<<== removing async here fixed the issue
  return (
    <div>
      <h2>Hello World</h2>
    </div>
  )
}
ReactDOM.render(<HelloApp />, document.querySelector("#app"))

jsfiddle

this.renderPosts()a를 반환한다.PromiseAFAIK Reactjs는 실제 데이터가 아닙니다.또한 AFAIK Reactjs는 암묵적으로 약속을 해결하지 않습니다.render.

이렇게 해야 돼요.

componentDidMount() {
  this.renderPosts();
}

renderPosts = async() => {
  try {
    const res = await axios.get('/posts');
    const posts = res.data;

    // this will re render the view with new data
    this.setState({
      Posts: posts
    });
  } catch (err) {
    console.log(err);
  }
}

render() {
  const posts = this.state.Posts?.map((post, i) => (
    <li key={i} className="list-group-item">{post.text}</li>
  ));

  return (
    <div>
      <ul className="list-group list-group-flush">
        {posts}
      </ul>
    </div>
  );
}

리액트 훅 사용:

UPDATE 2020-08-01: @ajruselaudio의 제안으로 수정되었습니다.

import React, {useState, useEffect} from "react"

const ShowPosts = () => {
    const [posts, setPosts] = useState([]);
    
    useEffect( () => { 
        async function fetchData() {
            try {
                const res = await axios.get('/posts'); 
                setPosts(res.data);
            } catch (err) {
                console.log(err);
            }
        }
        fetchData();
    }, []);
    return <div>{posts}</div>
}

불쌍한 나

농담 테스트를 사용하는 모든 사람을 위해

함수 children을 호출하려고 하면 이 에러가 발생하였습니다.

확인해 주세요.

const children = jest.fn().mockReturnValueOnce(null)

것은 아니다.

const children = jest.fn().mockRejectedValue(null);

Next.js를 사용하는 경우 다음을 사용할 수 있습니다.{}에 코드를 입력하십시오. 연결 또는 계산에 시간이 필요한 경우 다음을 추가합니다.await{}에 있는 코드로 이동합니다.

import { useEffect } from 'react'

useEffect(async () => {.......},[])

언급URL : https://stackoverflow.com/questions/47658765/objects-are-not-valid-as-a-react-child-found-object-promise