在 React 中渲染數據數組

Question

我正在嘗試將一些過濾的 xml 數據呈現到網頁中。 數據在一個數組中，如下圖所示。

這是我現在的代碼，但我很迷茫。 我嘗試了許多不同的變化，但它們似乎都導致：

1. 要么不向網頁呈現任何內容
2. 一個錯誤，指出 resValue“不能用作孩子”或類似的東西。

目前，此代碼不會帶來任何錯誤 - 它只是不會呈現數組。

總的來說，我是 React 和 Web 開發的新手。

任何幫助將不勝感激。 謝謝。

export default function Home() {
  // State to store value from the input field
  const [resValue, setResVal] = useState("");

  // Input Field handler
  function handleRes(event) {
    setResVal((resValue) => event);
    console.log(resValue);
    return (
      <div>
        <ul>
          {resValue.map((item) => {
            return <li>{item}</li>;
          })}
        </ul>
      </div>
    );
  }

  // State to store value from the input field
  const [inputValue, setInputValue] = useState("");

  // Input Field handler
  const handleUserInput = (e) => {
    setInputValue(e.target.value);
  };

  // Reset Input Field handler
  const resetInputField = () => {
    setInputValue("");
  };

  return (
    <>
      <div className="InsideContent">
        <Input
          className="input1"
          placeholder="Paste PoB Code"
          name="pobCode"
          value={inputValue}
          onChange={handleUserInput}
        />
      </div>

      <div className="InsideContent">
        <Button1 onClick={() => handleRes(loadPoBXml(inputValue))}>
          Confirm
        </Button1>
        <Button2 onClick={resetInputField}>Reset</Button2>
      </div>
    </>
  );
}

編輯：菲爾說過要正確解決這個問題，我需要使我的 loadPoBData 方法同步。 所以在這里我也添加了我的 decodePoBString 方法。

function loadPoBXml(str) {
var res = decodePoBString(str)
var xml = new XMLParser().parseFromString(res);   
let gem = (xml.getElementsByTagName('Gem'));
let item = (xml.getElementsByTagName('Item'))
return gem}

function decodePoBString(str) {
return inflateSync(new Buffer(str, "base64")).toString()

Answer 1

主要問題是您試圖在事件處理程序的返回值中呈現某些內容。 這不起作用，因為任何返回值都被忽略/丟棄。

渲染應該在組件的返回值中完成。 假設loadPoBXml()是同步的，你需要做的就是讓它設置你的resValue狀態並在你的 JSX 中映射它。

export default function Home() {
  // If resValue is meant to be an array, initialise it as one
  const [resValue, setResVal] = useState([]);
  const [inputValue, setInputValue] = useState("");

  // Confirm button click handler
  const handleClick = () => {
    setResVal(loadPoBXml(inputValue));
  };

  // Input Field handler
  const handleUserInput = (e) => {
    setInputValue(e.target.value);
  };

  // Reset Input Field handler
  const resetInputField = () => {
    setInputValue("");
  };

  return (
    <>
      <div className="InsideContent">
        <Input
          className="input1"
          placeholder="Paste PoB Code"
          name="pobCode"
          value={inputValue}
          onChange={handleUserInput}
        />
      </div>

      {/* assuming you want to render resValue here */}
      {resValue.length > 0 && (
        <div>
          <ul>
            {resValue.map((item, i) => (
              <li key={`item${i}`}>{item.name}</li>
            ))}
          </ul>
        </div>
      )}

      <div className="InsideContent">
        <Button1 onClick={handleClick}>Confirm</Button1>
        <Button2 onClick={resetInputField}>Reset</Button2>
      </div>
    </>
  );
}