如何使用 ReactJS 在动态表上显示每行的价格？

Question

I have a dynamic table and for each rows, I want after I select the product name, The price will be displayed and when I put the quantity, The total (price* quantity) column will be displayed also.

My issue is when I select the name of the product for any row, the same price will be displayed for each row on the table, also when I want the total display it's always having NaN as you see below on the figure :

My code :

class AjouterFacture extends Component {
  constructor(props) {
    super(props);
    this.state = {

      rowData: [],

      Produits: [],
      QuantiteF: "",
      Prix: [],
      id: 0,


    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleRowDelete = this.handleRowDelete.bind(this);
    this.handleRowAdd = this.handleRowAdd.bind(this);

    this.handleselectChange = this.handleselectChange.bind(this);
    this.PrixDisplay = this.PrixDisplay.bind(this);
  }
  componentWillReceiveProps(nextProps) {
    console.log("nextProps", nextProps);
  }
  componentDidMount() {

    axios({
      method: "get",
      url: "/app/getNomprod/",
      withCredentials: true,
    }).then(response => {
      if (response && response.data) {
        this.setState({
          Produits: response.data
        });
      }
    }).catch(error => console.log(error));
  }

  handleQuantiteChange(index, value) {
    const rowDataCopy = this.state.rowData.slice(0);
    rowDataCopy[index] = Object.assign({}, rowDataCopy[index], {
      QuantiteF: parseInt(value, 10)
    });
    this.setState({
      rowData: rowDataCopy
    });
  }

  handleselectprdtChange(index, value) {
    const rowDataCopy = this.state.rowData.slice(0);
    rowDataCopy[index] = Object.assign({}, rowDataCopy[index], {
      selectprdt: value
    });
    this.setState({
      rowData: rowDataCopy,
    });

  render() {

    let {
      Clients
    } = this.state.Clients;
    var Cd = {
      pointerEvents: 'none'
    }
    let {
      Produits
    } = this.state;
    let {
      rowData
    } = this.state.rowData;
    let {
      Prix
    } = this.state.Prix;

    return (<div className="animated fadeIn">


 <h6>  <Label ><strong>Veuillez ajouter au moins un produit :  </strong></Label></h6>
        <Table responsive style={items} >
        <thead style={back}>
                  <tr>
                    <th>PRODUIT</th>
                    <th>QUANTITE</th>
                    <th>PRIX UNITAIRE</th>
                    <th>TOTAL</th>
                    <th></th>
                  </tr>
                  </thead>
                  <tbody>
                {this.state.rowData.map((data, index) => (
              <tr key={index} id={index}>
                <td>
                  {" "}  <Input type="select" name="selectprdt" id="selectprdt"
                          placeholder="Veuillez sélectionner un produit"  value={data.selectprdt}
                    onChange={(e) => this.handleselectprdtChange(index, e.target.value)} >
           <option  key={-1} hidden>Choisisr un produit</option>


                     {  this.state.Produits.map((pdt, i) => 
                     <option key={i}>{pdt.Nomp}</option>


                     )} 


                      </Input>
                    </td>
                    <td><Input type="number" 
                          value={data.QuantiteF || 0} onChange={(e) => this.handleQuantiteChange(index, e.target.value)}/></td>
                    <td>


                    {  this.state.Prix.map(pr => 
      <p key={index} >{pr.PrixV} </p>
                       )} 

                        </td>

                <td  > 


                     <p key={index} className='pa2 mr2 f6'>{(data.QuantiteF || 0) * (parseInt(this.PrixDisplay(data.selectprdt)|| 0))}  </p>



                    </td>
                    <td>
                     <Button onClick={(e) => this.handleRowDelete(index)} active style={center}  size="sm" color="danger" className="btn-pill" aria-pressed="true">Effacer</Button>
      </td>{" "}
              </tr>
            ))}



                  <tr>

            <td/>
            <td/>
            <td/>
            <td/>
            <td><Button onClick={this.handleRowAdd} active style={center}  size="sm" color="info" className="btn-pill" aria-pressed="true">Ajouter une ligne</Button></td>
          </tr>
        </tbody>



        </Table>


        </div>
        );
  }
  PrixDisplay(selectprdt) {
    return axios.get("/app/getPrixprod/" + selectprdt).then(response => {
      if (response && response.data) {
        this.setState({
          Prix: response.data
        });
      }
    }).catch(error => {
      console.error(error);
    });
  }

  handleRowDelete(row) {
    const rowDataCopy = this.state.rowData.slice(0);
    rowDataCopy.splice(row, 1);
    this.setState({
      rowData: rowDataCopy
    });
  }
  handleRowAdd() {
    let id = this.state.id;
    id = id++;
    const rowDataCopy = this.state.rowData.slice(0);
    rowDataCopy.push({
      selectprdt: "",
      QuantiteF: 0,
      Prix: ""
    });
    this.setState({
      rowData: rowDataCopy,
      id: id
    });
  }
}
export default AjouterFacture;

How can I fix that please ?

Answer 1

1. About showing price. You are not saving the price(concatanating). Rather resetting it inside PrixDisplay. So inside state.Prix you have only one value. You probably need to parse into state.rowData[i].Prix. And show actually it inside render. Remove the altogether state.Prix.
2. About the NaN. Because your PrixDisplay function return Promise it can not be parsed. So NaN. Understand first issue and solution. The second will come with it.

Also, as a suggestion, please look to map, filter methods of Array and try to refactore. It will make you code more pleasant and concise.