Question

早上好，我有一个简单的组件，在这里我尝试从API获取特定数据（这部分效果很好-我可以映射数据，将其保存到数组中，并通过钩子将其保存为'streams'状态。< / p>

目标是在键，类别和标题中显示ID。

错误：

f = open("highscores.txt", "r")
highscores_lines = f.read()
for line in highscores_line[:5]:
    print(line)

我不知道我做了什么，但是这段代码有效：

  interface IStreams {
        id: number;
        category: string;
        title: string;
      };

     let Streams: React.FC<IStreams> = (props) => {

        const InitialStreamsState = {id: 0, category: '', title: ''}

        const [loading, setLoading] = useState(false)
        const [streams, setStreams] = useState(InitialStreamsState)

        useEffect(() => {
            fetch('http://localhost:5000/stream/getstreams')
            .then(response => {
              return response.json();
            })
            .then(streams => {
                console.log(streams);
                const test = streams.map((obj:any) => ({id: obj.id, category: obj.category, title: obj.title}));
                setLoading(true)
                setStreams(test)
            })
            .catch(err =>{
                console.log(err);
            });
        }, []);

        return (
            <div>
                {loading ?
                    <Container>
                    <Row>
                        <Col xs="6" sm="4">
                        <div className ="home-header">
                        <h1>Top Streams</h1>
                                {streams.map((id:any, category:any, title:any) => (
                                    <p key={id}>
                                    {title}
                                    {category}
                                    </p>
                                ))}
                        </div>  
                    </Col>
                    </Row>
                    </Container>
                         :
                         <Container>
                         <Row>
                             <Col xs="6" sm="4">
                             <div className ="home-header">
                             <h1>Loading</h1>
                             </div>  
                         </Col>
                         </Row>
                         </Container>
                         }
            </div>
        );
      }

Answer 1

您正在尝试对.map中声明的对象类型调用IStreams函数。尝试将其转换为对象数组。您可以尝试如下操作，将对象的接口称为IStream，并期望数组IStream。另外，InitialStreamsState应该是对象数组。

interface IStream {
  id: number;
  category: string;
  title: string;
};

let Streams: React.FC<IStream[]> = (props) => {
  const InitialStreamsState = [{id: 0, category: '', title: ''}];

  const [loading, setLoading] = useState(false);
  const [streams, setStreams] = useState(InitialStreamsState);

  useEffect(() => {
    fetch('http://localhost:5000/stream/getstreams')
    .then(response => {
      return response.json();
    })
    .then((responseStreams as IStream[]) => {
      console.log(responseStreams);
      const test = responseStreams.map(stream => ({id: stream.id, category: stream.category, title: stream.title}));
      setLoading(true);
      setStreams(test);
    })
    .catch(err =>{
      console.log(err);
    });
  }, []);

  return (
    <div>
      {loading ?
        <Container>
          <Row>
            <Col xs="6" sm="4">
              <div className ="home-header">
                <h1>Top Streams</h1>
                  {streams.map((id:any, category:any, title:any) => (
                    <p key={id}>
                      {title}
                      {category}
                    </p>
                  ))}
                </div>  
              </Col>
            </Row>
          </Container>
        :
          <Container>
            <Row>
              <Col xs="6" sm="4">
                <div className ="home-header">
                  <h1>Loading</h1>
                </div>  
              </Col>
            </Row>
          </Container>
        }
      </div>
    );
}

TS2339-无法映射来自API的请求

1 个答案: