리액트 훅 useState Array

리액트 훅 useState Array

리셋을 시도했습니다.useState어레이 값을 입력했지만 어레이 값에 대한 참조를 찾을 수 없습니다.

드롭다운 값을 초기 상태에서 allowedState 값으로 변경하려고 합니다.여기서 후크 방식을 사용하여 값을 설정하고 있습니다.setStateValues이 코드에 코멘트를 붙이면 드롭 다운이 표시됩니다.나는 왜 사용할 수 없는지 이해할 수 없었다.setStateValuesmethod를 사용하여 상태 변수 값을 리셋합니다.

다음의 에러가 표시됩니다.

리렌더가 너무 많아무한 루프를 방지하기 위해 리액트는 렌더링 수를 제한합니다.

여기 뭐가 잘못됐나요?

    import React, { useState } from "react"; 
    import ReactDOM from "react-dom";

    const StateSelector = () => {   
    const initialValue = [
    { id: 0,value: " --- Select a State ---" }];

      const allowedState = [
        { id: 1, value: "Alabama" },
        { id: 2, value: "Georgia" },
        { id: 3, value: "Tennessee" }
        ];

      const [stateOptions, setStateValues] = useState(initialValue);  
      // initialValue.push(...allowedState);

      console.log(initialValue.length);

      setStateValues(allowedState); // Not sure why cannot I reset the state in here for an array.

         return (<div>
          <label>Select a State:</label>
          <select>
            {stateOptions.map((localState, index) => (
              <option key={localState.id}>{localState.value}</option>
            ))}
          </select>
        </div>   ); };

    const rootElement = document.getElementById("root");
    ReactDOM.render(<StateSelector />, rootElement);

렌더링 기능 내에서 상태를 설정하거나 부작용이 있는 다른 작업을 수행해서는 안 됩니다.후크를 사용할 때는useEffect이걸 위해서.

다음 버전이 작동합니다.

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const StateSelector = () => {
  const initialValue = [
    { id: 0, value: " --- Select a State ---" }];

  const allowedState = [
    { id: 1, value: "Alabama" },
    { id: 2, value: "Georgia" },
    { id: 3, value: "Tennessee" }
  ];

  const [stateOptions, setStateValues] = useState(initialValue);
  // initialValue.push(...allowedState);

  console.log(initialValue.length);
  // ****** BEGINNING OF CHANGE ******
  useEffect(() => {
    // Should not ever set state during rendering, so do this in useEffect instead.
    setStateValues(allowedState);
  }, []);
  // ****** END OF CHANGE ******

  return (<div>
    <label>Select a State:</label>
    <select>
      {stateOptions.map((localState, index) => (
        <option key={localState.id}>{localState.value}</option>
      ))}
    </select>
  </div>);
};

const rootElement = document.getElementById("root");
ReactDOM.render(<StateSelector />, rootElement);

여기 코드 샌드박스에 있어요

최종적으로는 어떤 동적 소스에서 상태 목록을 로드하고 싶을 것입니다(그렇지 않으면allowedState사용하지 않고 직접useState(전혀야 합니다.이 경우 목록을 로드하기 위한 API 호출은 다음 명령어 내에 있을 수 있습니다.useEffect차단합니다.

당신의 상태를 최소한으로 유지하도록 노력하세요.보관할 필요가 없습니다.

   const initialValue = [
    { id: 0,value: " --- Select a State ---" }];

상태 그대로.영구과 변경의 분리

const ALL_STATE_VALS = [
    { id: 0,value: " --- Select a State ---" }
    { id: 1, value: "Alabama" },
    { id: 2, value: "Georgia" },
    { id: 3, value: "Tennessee" }
];

그런 다음 ID만 상태로 저장할 수 있습니다.

const StateSelector = () =>{
  const [selectedStateOption, setselectedStateOption] = useState(0);

  return (
    <div>
      <label>Select a State:</label>
      <select>
        {ALL_STATE_VALS.map((option, index) => (
          <option key={option.id} selected={index===selectedStateOption}>{option.value}</option>
        ))}
      </select>
    </div>);
   )
}

Ryan의 답변을 자세히 설명하자면:

setStateValues가 호출될 때마다 React는 컴포넌트를 재렌더합니다.즉, 이 명령어의 함수 본문이StateSelector컴포넌트 기능이 재실행됩니다.

리액트 문서:

setState()는 componentUpdate()가 false를 반환하지 않는 한 항상 재렌더가 발생합니다.

기본적으로 다음을 사용하여 상태를 설정합니다.

setStateValues(allowedState);

재실행의 원인이 되고, 그 후에 기능이 실행되는 등입니다.따라서 루프의 문제가 발생합니다.

포인트를 나타내려면 , 다음과 같이 타임 아웃을 설정합니다.

  setTimeout(
    () => setStateValues(allowedState),
    1000
  )

이것으로 '너무 많은 리렌더' 문제는 끝이 났다.

당신의 경우엔, 부작용에 대처하고 있습니다.UseEffect컴포넌트 기능 중 하나입니다.자세한 내용은 여기를 참조하십시오.

수락된 답변은 setState를 올바르게 설정하는 방법을 보여주지만 제대로 작동하는 선택 상자로 이어지지는 않습니다.

import React, { useState } from "react"; 
import ReactDOM from "react-dom";

const initialValue = { id: 0,value: " --- Select a State ---" };

const options = [
    { id: 1, value: "Alabama" },
    { id: 2, value: "Georgia" },
    { id: 3, value: "Tennessee" }
];

const StateSelector = () => {   
   const [ selected, setSelected ] = useState(initialValue);  

     return (
       <div>
          <label>Select a State:</label>
          <select value={selected}>
            {selected === initialValue && 
                <option disabled value={initialValue}>{initialValue.value}</option>}
            {options.map((localState, index) => (
               <option key={localState.id} value={localState}>
                   {localState.value}
               </option>
             ))}
          </select>
        </div>
      ); 
};

const rootElement = document.getElementById("root");
ReactDOM.render(<StateSelector />, rootElement);

use 상태가 항상 필요한 것은 아닙니다.그냥 이렇게 하면 됩니다.

let paymentList = [
    {"id":249,"txnid":"2","fname":"Rigoberto"}, {"id":249,"txnid":"33","fname":"manuel"},]

그리고 제 경우엔 이런 지도 루프에 데이터를 사용하세요. 제 경우에는 그냥 표였을 뿐이고, 많은 분들이 같은 데이터를 찾고 계실 겁니다.사용법은 다음과 같습니다.

<div className="card-body">
            <div className="table-responsive">
                <table className="table table-striped">
                    <thead>
                        <tr>
                            <th>Transaction ID</th>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            paymentList.map((payment, key) => (
                                <tr key={key}>
                                    <td>{payment.txnid}</td>
                                    <td>{payment.fname}</td>
                                </tr>
                            ))
                        }
                    </tbody>
                </table>
            </div>
        </div>

//get value
 const valor1 = event.target.elements.valor1.value;
//add to value object
        const todo = {
            valor1,
        }
//push to new value or your state
        setValor(prevLista =>{
            return prevLista.concat(todo)
        })
     
    }

언급URL : https://stackoverflow.com/questions/53824116/react-hooks-usestate-array