Question

我是尝试制作测验应用程序的反应初学者。我正在使用 https://peaceful-temple-16111.herokuapp.com/https://salty-cove-08526.herokuapp.com/api/countries?format=json （以避免 CORS）来获取标志的图像。它一次发送 3 个标志图像。我在 div img-wrapper 中显示图像，我想在提交时不断更改标志图像。当反应应用程序第一次加载时，显示第一张图像，但提交后图像不会改变并出现此未捕获的错误，但提交后索引确实会更新。请帮助如果你们需要任何其他文件，请告诉我

reactjs



class form extends Component{
    constructor(props){
        super(props);

        this.state={
            answer:'',
            countries:[],
            index:0,
            links : []
        }
        this.handleChange=this.handleChange.bind(this);
        this.handleSubmit=this.handleSubmit.bind(this);
       
    }

    componentDidMount(){
        this.fetchData();
    }

    fetchData = async () => {
        await axios.get('https://peaceful-temple-16111.herokuapp.com/https://salty-cove-08526.herokuapp.com/api/countries?format=json')
            .then(res => {
                console.log("fetched data")
                this.setState({ countries: res.data });
                let links = []
                this.state.countries.map(country =>
                    links.push(country.photo)
                )
                this.setState({
                    links
                })
            })
    }


    

    handleSubmit=(e)=>{
        e.preventDefault();
        this.state.index += 1
        console.log('index=',this.state.index)
        
        const answered={
            answer:this.state.answer    
        }

        axios.post('http://localhost:4000',answered)
        .then(response=>console.log(response.data))
        .then(response=>{
            this.setState({answer:''})
        })
    }

    handleChange=(e)=>{
        this.setState({
            answer:e.target.value,
        })  
    }
    render(){
        let {countries} = this.state

        return (
            <div>
                <section className="login">
                    <div className="loginContainer">
                        <div className="heading">
                            Guess the <b>Country</b>
                        </div>
                      
                        <div className="img-wrapper"> 
                            <img width="250px"src={this.state.links[this.state.index]}/>
                            {console.log('file : ', this.state.links[this.state.index])}
                            {console.log('links : ', this.state.links)}
                        </div>

控制台截图（提交按钮被点击一次后） https://imgur.com/a/saEwVxm

Uncaught (in promise) Error: Request failed with status code 404 in Axios

0 个答案: