Question

我遇到了重新渲染错误的问题！

import React , {useEffect} from 'react'
import "./UsernameStory.css";
import Axios from "axios";
import Storyfeed from '../storySmall/Storyfeed';




const UsernameStory = ({match}) => {

    const [statue , setStatue] = React.useState("");
    const [storie , setStorie] = React.useState([]);

    useEffect(() => {
        const urls = match.params.username;
        Axios.post("http://localhost:8080/user/"+urls, {})
            .then((response) => {
                if(response.data.statue)
                {
                    setStatue(response.data.statue);
                }
                if(response.data){
                    setStorie(storie.concat(response.data));
                }
            });
    }, []); // An empty denpendency array allows you to fetch the data once on mount


    return (
        <div>
            <p>{statue}</p>
            {storie.map((story , key) => (<Storyfeed key = {key}  story = {story}/>))}
        </div>
    )
}

export default UsernameStory

Storyfeed.js

import React , {useEffect}from 'react'
import Axios from "axios";
import {Link} from "react-router-dom";
import NotFound from '../../errors/404/NotFound';
import ThumbUpIcon from '@material-ui/icons/ThumbUp';

const Storyfeed = ({story}) => {
    const [votes , setVotes] = React.useState(story.vote);
    const [link , setLink] = React.useState("");

        setLink(story.link)
        let url = `/story/${link}`;
        return(
            <div className = "story">
                <p>{story.username}</p>
                <Link to={url}><p>{story.title}</p></Link>
                <div className = "votes">
                    <ThumbUpIcon />
                    <p> Total Votes : {votes}</p>
                </div>
            </div>
        );
}

这是回复

response.data = [{
    email: "mouadpro3@gmail.com",
    id: 7,
    link: "hello-world",
    story: "test",
    title: "hello world",
    username: "MH15O",
    votes: 0
},
...

我刚刚从后端获取了一些数据，并使用 useState 来存储将要映射的结果数组，以便使用 Storyfeed 组件显示一些每个故事数据这也是响应，它提供了一组对象，我想映射它们以便我可以显示它们

Answer 1

我相信您试图通过尝试对先前状态值进行连接来不干扰先前状态值。试试下面的

response.data = [{
    email: "mouadpro3@gmail.com",
    id: 7,
    link: "hello-world",
    story: "test",
    title: "hello world",
    username: "MH15O",
    votes: 0
},
{...},
{...}];

对于你给出的这个回复，我已经更新了答案

const UsernameStory = ({match}) => {

    const [statue, setStatue] = React.useState("");
   
    const [story, setStory] = React.useState([]);

   
   const setMyStory = (sto) => setStory([...story, sto]);
   
   or
 
   const setMyStory = (sto) => setStory(prevState => [...prevState, sto]);

    useEffect(() => {
        const urls = match.params.username;
        Axios.post("http://localhost:8080/user/"+urls, {})
            .then((response) => {
                if( response.data && response.data[0].statue){
                  setStatue(response.data[0].statue);
               } else if(response.data && response.data[0].story) {
                   setMyStory(response.data[0])
                }
            });
    }, []); 


    return (
        <div>
            <p>{statue}</p>
            {story.map((story , key) => (<Storyfeed key = {key}  story = {story}/>))}
        </div>
    )
}

export default UsernameStory

在组件中渲染从后端获取的数据时出现渲染问题

1 个答案: