useState 不更新組件中傳遞的 state

Question

SelectedColumn值不在CustomHeader組件中。 但是， setSelectedColumn有效嗎？ 為什么，另外，我將CustomHeader傳遞給使用 useMemo 的常量組件。 沒有 useMemo CustomHeader 不起作用。

  const [selectedColumn, setSelectedColumn] = useState(null);
  console.log("selected Column Outside:", selectedColumn); // It works!

  const CustomHeader = (props) => {
    const colId = props.column.colId;

    console.log("selected Column In CustomHeader:", selectedColumn); // Doesn't work
    return (
      <div>
        <div style={{float: "left",  margin: "0 0 0 3px"}} onClick={() => setSelectedColumn(props.column.colId)}>{props.displayName}</div>
        { selectedColumn === colId ? <FontAwesomeIcon icon={faPlus} /> : null}
      </div>
    )
  }

  const components = useMemo(() => {
    return {
      agColumnHeader: CustomHeader
    }
  }, []);

更新：如果我在CustomHeader組件中使用 useState 掛鈎，它會在每一列中添加一個“+”號，並且不會從前一列中刪除。 這是一張圖片：

Answer 1

您應該在組件中使用鈎子

  const CustomHeader = (props) => {
    const colId = props.column.colId;

    const [selectedColumn, setSelectedColumn] = useState(null); 

    console.log("selected Column In CustomHeader:", selectedColumn); // Should work
    return (
      <div>
        <div style={{float: "left",  margin: "0 0 0 3px"}} onClick={() => setSelectedColumn(props.column.colId)}>{props.displayName}</div>
        { selectedColumn === colId ? <FontAwesomeIcon icon={faPlus} /> : null}
      </div>
    )
  }

 

Answer 2

閱讀您的評論后，您的問題顯然是關於您想要放置 useState 的位置。

首先，您應該始終將 useState 放在組件中。 但在您的情況下，顯然您想要實現的是，當您 select 列時，其他列被取消選擇。

因此，您需要將selectedColumn和setSelectedColumn作為 props 傳遞給您的組件，並在父組件上創建 useState。

假設您的所有CustomHeader組件共享相同的父組件，在我的示例中我將調用CustomHeadersParent ，您應該執行以下操作：

// added mock headers to have a working example
const headers = [
  {
    displayName: "Game Name",
    column: {
      colId: 1,
    },
  },
  {
    displayName: "School",
    column: {
      colId: 2,
    },
  },
];

const CustomHeadersParent = (props) => {
  const [selectedColumn, setSelectedColumn] = useState(null);

  return headers.map((h) => (
    <CustomHeader
      column={h.column}
      displayName={h.displayName}
      setSelectedColumn={setSelectedColumn}
      selectedColumn={selectedColumn}
    />
  ));
};


const CustomHeader = (props) => {
  const colId = props.column.colId;

  return (
    <div>
      <div
        style={{ float: "left", margin: "0 0 0 3px" }}
        onClick={() => props.setSelectedColumn(props.column.colId)}
      >
        {props.displayName}
      </div>
      {props.selectedColumn === colId ? <FontAwesomeIcon icon={faPlus} /> : null}
    </div>
  );
};

const components = useMemo(() => {
  return {
    agColumnHeader: CustomHeader,
  };
}, []);