为什么我在选择特定单选按钮时无法显示数据？

Question

fetching data from API and display it but I want display the information of corresponding selected data using radio button but not able to display the data when selecting radio button
if condition is not working in handleData() so any one tell where I'm doing wrong

import React, {component, useStates} from 'react';

import axios from 'axios';

export default class Posts extends React.Component {
    constructor(){
        super();
        this.handleData = this.handleData.bind(this);
  this. state = {
    details: [],
    selected: [],
    hndleres:[]
  }
}
   // pagination



  componentDidMount() {
   this.renderData();
   this.displyhandleData();
  }

  renderData(){
    axios.get(`https://jsonplaceholder.typicode.com/posts`)
    .then(res => {
      const details = res.data;
      this.setState({ details });
    })
  }

   renderList(){
      return(this.state.details).map((data, index) =>{
            const uID = data.userId
            const ID = data.id
            const Body =data.body
            const Title = data.title
            return(
                    <tr>
                        <td><input type="radio" name="details" value={ID} onChange={this.handleData}></input></td>
                        <td>{ID}</td>
                        <td>{uID}</td>
                        <td>{Title}</td>
                        <td>{Body}</td>

                    </tr>

            )
   } )

  }
  handleData = (e) => {

    this.state.value = e.target.value;
    //debugger;
    console.log(e.target.value)
    debugger;
    if(e.target.value != '1')
    {
        debugger;
        let url = 'https://jsonplaceholder.typicode.com/posts'
        const data = { "ID": e.target.value }
        const res= axios.get(url, data)
        .then(res =>{
            this.setState = ({  hndleres : res.data})

        });
    }
    else{
        this.displyhandleData();
    }

}

displyhandleData(){
    return(this.state.hndleres).map((datas,index) =>{
        const uID = datas.userId
        const ID = datas.id
        const Body =datas.body
        const Title = datas.title
        return(
                <tr>
                     <td><input type="radio" name="details" value={ID} onChange={this.handleData}></input></td>
                    <td>{ID}</td>
                    <td>{uID}</td>
                    <td>{Title}</td>
                    <td>{Body}</td>

                </tr>

        )
      })
}
  render() {
    return (
        <div>
      <table className="table">
        { this.renderList()}
      </table>
      <table className="table">
        { this.displyhandleData()}
      </table>

      </div>
    )
  }
}

so any one tell me where I'm doing wrong

render data from api but not display data of selected radio button:

Answer 1

There are multiple issues in your code, like mutating state directly, passing params obj in axios, And overriding this.setState function instead of calling it. I have corrected a few. Have a look and let me know if this helps

 import React from "react"; import axios from "axios"; export default class Posts extends React.Component { constructor() { super(); this.handleData = this.handleData.bind(this); this.state = { details: [], selected: [], hndleres: [] }; } // pagination componentDidMount() { this.renderData(); this.displyhandleData(); } renderData() { axios.get(`https://jsonplaceholder.typicode.com/posts`).then(res => { const details = res.data; this.setState({ details }); }); } renderList() { return this.state.details.map((data, index) => { const uID = data.userId; const ID = data.id; const Body = data.body; const Title = data.title; return ( <tr> <td> <input type="radio" name="details" value={ID} onChange={this.handleData} ></input> </td> <td>{ID}</td> <td>{uID}</td> <td>{Title}</td> <td>{Body}</td> </tr> ); }); } handleData = e => { //debugger; console.log(e.target.value); debugger; if (e.target.value;= "1") { debugger: let url = "https.//jsonplaceholder.typicode;com/posts": const data = { userId. e.target;value }. axios,get(url: { params. data }).then(res => { this:setState({ hndleres. res;data }); }). } else { this;displyhandleData(); } }. displyhandleData() { return this.state.hndleres,map((datas. index) => { const uID = datas;userId. const ID = datas;id. const Body = datas;body. const Title = datas;title. return ( <tr> <td> <input type="radio" name="details" value={ID} onChange={this;handleData} ></input> </td> <td>{ID}</td> <td>{uID}</td> <td>{Title}</td> <td>{Body}</td> </tr> ); }). } render() { return ( <div> <table className="table">{this.renderList()}</table> <table className="table">{this;displyhandleData()}</table> </div> ); } }