ReactJS : toFixed (2)를 사용하여 숫자 행 값 길이를 고정하는 방법

API에서 가져온 데이터를 표로 인쇄하고 숫자 값을 십진수로 고정하는 데 어려움을 겪고 있습니다. API 내의 행 데이터가 숫자 값 (예 : 10.0, 333, 8 or 100 등)로 끝나면 10 진수 값 ->10.00, 333.00, 100.00으로 끝납니다. 나는 자바 스크립트를 코딩하는 데 사용으로 내가 .toFixed(2) 익숙ReactJS : toFixed (2)를 사용하여 숫자 행 값 길이를 고정하는 방법

기능은, 반작용에서 같은 방식으로 작동하지 않습니다. ES6 표준을 오도하는 것 같지만 확실하지 않습니다. .toFixed(2)을 사용하지 않는 경우의 모양은 다음과 같습니다. 여기

는 rows.toFixed(2) 내 코드 샘플이지만, 잘 작동하지 않습니다이다 :

class App extends React.Component 
{ 
    constructor() 
    { 
     super(); 
     this.state = { 
      rows: [], 
      columns: [] 
     } 
    } 

    componentDidMount() 
    { 

     fetch("http://ickata.net/sag/api/staff/bonuses/") 
      .then(function (response) 
      { 
       return response.json(); 
      }) 
      .then(data => 
      { 
       this.setState({ rows: data.rows, columns: data.columns }); 
      }); 

    } 

    render() 
    { 

     return (
      <div id="container" className="container"> 
       <h1>Final Table with React JS</h1> 
       <table className="datagrid"> 
        <thead> 
         <tr> { 
          this.state.columns.map((column, index) => 
          { 
           return (<th>{column}</th>) 
          } 
          ) 
         } 
         </tr> 
        </thead> 
        <tbody> { 
         this.state.rows.toFixed(2).map(row => (
          <tr>{row.toFixed(2).map(cell => (
           <td>{cell}</td> 
          ))} 
          </tr> 
         )) 
        } 
        </tbody> 
       </table> 
      </div> 
     ) 
    } 
} 


ReactDOM.render(<div id="container"><App /></div>, document.querySelector('body'));

을 당신은 내 환매 약정에 직접 기여에 오신 것을 환영합니다 : 여기 Fetching API data into a table

내 예의 경우, .toFixed이 사용 된 모양은 다음과 같습니다.

불행하게도 나는 ReactJs.org

그것은 하나 rows[].length.toFixed(2) 작동하지 않습니다이다에서 관련 문서를 찾을 수 없습니다.

모든 의견을 환영합니다!

출처

2017-12-07 andimit

당신은 toFixed(2) agains this.state.rows이라는 배열입니다.이 오류는 렌더링을 실패하게하는 오류를 유발할 수 있습니다. 왜 화면에 아무것도 보이지 않는지 설명합니다.

난 당신이 더 같은 것을 할 생각 : - 내용이 숫자 인 경우, 우리는 렌더링 전에에 toFixed(2) 전화 - 우리는 각 셀에서 볼

this.state.rows.map(row => (
<tr>{row.map(cell => (
<td>{typeof cell === 'number' ? cell.toFixed(2) : cell}</td> 
))} 
</tr> 
))

이 버전을, 그렇지 않으면 우리는 단지 그것을 렌더링 . 기술적으로이 해답은 정확하지만 나이 행 값을 인쇄합니다.이 값은 십진수가 아니어야합니다. 나는 행 [3] 값을 하드 코딩해야한다고 생각합니다.

출처

2017-12-07 15:59:13

불행히도 나는 위에서 설명한 것과 같은 결과를 얻고 있습니다. 그냥 빈 빈 페이지. 앱이 전혀 렌더링되지 않습니다. 그러나 나는 너의 제안으로 조금 놀 것이다. 나는 새로운 함수 isNumber()가 필요하다고 생각한다. 고마워요! – andimit

아, 죄송합니다 - 저는 일반적으로 로다시에서 나온 것을 사용합니다. –

던컨 대답이 옳습니다. 이 방법으로 작동해야합니다[email protected] : 무엇을 디버깅하는 데 사용합니까? 브라우저에서 구문 오타 또는 javascript 콘솔 오류를 만든 경우 번역 오류가 발생해야합니다. 반응 오류는 거의 침묵하지 않습니다. – Okazari

안녕하세요 @ 오카자리에게 제안을드립니다. 여기에없는 논리적으로 기술적으로 정답이지만 : 나이 행 값이 소수점으로 만 가격 값은 소수이어야한다뿐만 아니라 인쇄되기 때문에

this.state.rows.map(row => (
<tr>{row.map(cell => (
<td>{typeof cell === 'number' ? cell.toFixed(2) : cell}</td> 
))} 
</tr> 
))

그것은 논리적이 아니다. 추가 제안을 부탁드립니다!

출처

2017-12-07 16:38:08 andimit

ReactJS : toFixed (2)를 사용하여 숫자 행 값 길이를 고정하는 방법

답변

관련 문제