>

값을 렌더링하기 위해 배열을 반복합니다. 항목을 클릭하면 값과 setState를 가져와야합니다. 현재 어떤 요소를 클릭하든 관계없이 배열의 마지막 요소 값으로 상태를 설정합니다.

onClick 호출에서 화살표 기능을 사용하고있는 것이 문제 일 수 있습니다. jslint는 또한 이와 같은 루프에서 함수를 호출하는 것에 대한 나쁜 습관을 강조합니다.

값을 클릭하면 맨 아래에 상태가 표시됩니다. 도움을 주시면 대단히 감사하겠습니다.

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	currentValue: null,
    }
  }
  
  getValue = (valueToGet) => {
  	this.setState({
    	currentValue: valueToGet,
    })
  };
  
  render() {
	const Values = {
    	valuesList: [{
        value: 'value one'
        },{
        value: 'value two',
        },{
        value: 'value three',
        }
      ]
    };
    
    var renderValues = [];
    var valuesList = Values.valuesList;
    
    for(var i=0; i < valuesList.length; i++) {
    	var valueItem = valuesList[i];
      
      renderValues.push(
      <div 
        onClick={() => this.getValue(valueItem.value)}
        key={i}
      >
        <p>{valueItem.value}</p>
      </div>
      )
    }
    return (
      <div>
        {renderValues}
        {JSON.stringify(this.state.currentValue)}
      </div>
    )
  }
}
ReactDOM.render(<App />, document.querySelector("#app"))

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
}
p {
  padding-bottom: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>


  • 답변 # 1

    전통적인 for 대신  루프, 당신은 map 를 사용할 수 있습니다  배열을 반복합니다.

    renderValues = Values.valuesList.map((valueItem,i) => {
          return <div 
            onClick={() => this.getValue(valueItem.value)}
            key={i}
          >
            <p>{valueItem.value}</p>
          </div>
        })
    
    

    데모

  • 답변 # 2

    문제는 루프에서 생성 된 함수에 있다고 지적하는 것이 옳습니다. 루프에서 함수를 정의 할 때 클로저가 생성되고 클로저에 전달 된 마지막 값은 모든 onClick 함수에 대해 표시되는 세 번째 값입니다.

    자세한 설명은 여기에서 찾을 수 있습니다

  • 답변 # 3

    루프의 화살표 함수는 문제가 아니지만 안전하지 않은 변수 valueItem 를 포함합니다  그것입니다.

    let 사용   var 대신  변수 valueItem  코드를 작동시킵니다.

    class App extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
        	currentValue: null,
        }
      }
      
      getValue = (valueToGet) => {
      	this.setState({
        	currentValue: valueToGet,
        })
      };
      
      render() {
    	const Values = {
        	valuesList: [{
            value: 'value one'
            },{
            value: 'value two',
            },{
            value: 'value three',
            }
          ]
        };
        
        var renderValues = [];
        var valuesList = Values.valuesList;
        
        for(var i=0; i < valuesList.length; i++) {
        	let valueItem = valuesList[i];
          
          renderValues.push(
          <div 
            onClick={() => this.getValue(valueItem.value)}
            key={i}
          >
            <p>{valueItem.value}</p>
          </div>
          )
        }
        return (
          <div>
            {renderValues}
            {JSON.stringify(this.state.currentValue)}
          </div>
        )
      }
    }
    ReactDOM.render(<App />, document.querySelector("#app"))
    
    
    body {
      background: #20262E;
      padding: 20px;
      font-family: Helvetica;
    }
    #app {
      background: #fff;
      border-radius: 4px;
      padding: 20px;
    }
    p {
      padding-bottom: 50px;
    }
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
    <div id="app"></div>
    
    

관련 자료

  • 이전 mysql - UPDATE TRIGGER에서이 'WHERE'조건이 구문 오류를 발생시키는 이유는 무엇입니까?
  • 다음 mysql - 왼쪽 테이블 열 = 무언가 또는 null 인 왼쪽 조인