Question

我是ReactJs的新手，我希望当我选择产品名称时，价格会显示出来，然后输入“数量”，而“合计”列将显示“数量*价格”的结果。我尝试显示价格，但是总列始终显示NaN的问题。如您所见，下面的代码：

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

      rowData: [],

      Produits: [],
      Quantite: "",
      Prix: [],

      id: 0
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleRowDelete = this.handleRowDelete.bind(this);
    this.handleRowAdd = this.handleRowAdd.bind(this);
    this.handleQuantiteChange = this.handleQuantiteChange.bind(this);
    this.handleselectprdtChange = this.handleselectprdtChange.bind(this);
    this.PrixDisplay = this.PrixDisplay.bind(this);
    this.TotalDisplay = this.TotalDisplay.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], {
      Quantite: 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="selectedcl" id="selectcl"
                          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.Quantite || 0} onChange={(e) => this.handleQuantiteChange(index, e.target.value)}/></td>
                    <td>
                     {  this.state.Prix.map((pr, k) => 
                     <p key={k} >{pr.PrixV} </p>
                     )} 

                        </td>
                <td  > 
                     <p key={index} className='pa2 mr2 f6'>{(data.Quantite || 0) * (parseInt(this.PrixDisplay(data.selectprdt)))}  </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>parseInt(
            <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>

        <tfoot>
          <tr>

            <th></th>

            <th></th>
          </tr>
</tfoot>
        </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);

    });
  }
  TotalDisplay(){


   return   this.state.Prix.map(pr =>
      parseInt(pr.PrixV));



  }

  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: "",
      Quantite: 0,
      Prix: 0
    });
    this.setState({
      rowData: rowDataCopy,
      id: id
    });
  }
}
export default AjouterFacture;

如何显示它？

Answer 1

Bonjour梅利莎！

我认为您尝试使用：p显示值

{(data.Quantite || 0) * (parseInt(this.PrixDisplay(data.selectprdt)))}

但是我看到PrixDisplay是一个不返回整数或Promise之外的所有函数的函数。因此，实际上您似乎将data.Quantite乘以parseInt值的NaN，请尝试下面的代码段。

就您而言，我认为您需要：

以您的状态displayedPrice : 0声明（如果Prix不是同一个人）
使用{(data.Quantite || 0) * (this.state.displayedPrice || 0)}
致电您的PrixDisplay(data.selectprdt)函数，该函数已将Prix设置为您的状态。当您需要时。
再见！当axios得到响应时，setState函数将更新Prix和displayedPrice，这将触发您的组件的重新呈现，这些组件显示出良好的价值。

Bienàtoi。

console.log(2 * parseInt(Promise.resolve()))

Answer 2

根据您的DOM，看来您期望函数PrixDisplay返回一个值。

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

但是您的函数仅设置状态，即不返回任何内容。此外，您将需要在价格数组中使用新值设置正确的值，如下所示：

PrixDisplay(index, selectprdt) {
 const priceArray = this.state.Prix;
 return axios.get("/app/getPrixprod/" + selectprdt).then(response => {
  if (response && response.data) {
    priceArray[index] = response.data;
    this.setState({ //<---- You're doing just a setState and not returning anything.
      Prix: priceArray
    });
  }
 }).catch(error => {
  console.error(error);

 });
}

相反，您可以做的是

{(data.Quantite || 0) * (parseInt(this.state.Prix[index].PrixV || 0))}

如何使用ReactJS获取总列数？

2 个答案: