Javascript 在React中呈现变量

我尝试了以下这篇文章：

是因为我使用了一个箭头函数作为我的代码不起作用的组件吗？我应该如何呈现一个变量

我得到一个错误，值

selectedValue

不能为空

import React, { useState } from "react";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  Button
} from "reactstrap";

const DropdownPaging = props => {
  var selectedValue = 10;

  const [dropdownOpen, setDropdownOpen] = useState(false);
  const toggle = () => setDropdownOpen(prevState => !prevState);

  function dropDownChanged(val) {
    selectedValue = val;
    alert(val);
  }

  return (
    <div>
      <table>
        <tr>
          <td>
            <Button outline color="dark">
              &lt;
            </Button>
          </td>
          <td>
            <Button outline color="dark">
              &gt;
            </Button>
          </td>
          <td>
            <Dropdown isOpen={dropdownOpen} toggle={toggle}>
              <DropdownToggle caret outline color="dark">
                {selectedValue}
              </DropdownToggle>
              <DropdownMenu>
                <DropdownItem onClick={() => dropDownChanged(10)}>
                  10
                </DropdownItem>
                <DropdownItem onClick={() => dropDownChanged(25)}>
                  25
                </DropdownItem>
                <DropdownItem onClick={() => dropDownChanged(50)}>
                  50
                </DropdownItem>
                <DropdownItem onClick={() => dropDownChanged(100)}>
                  100
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </td>
        </tr>
      </table>
    </div>
  );
};

export default DropdownPaging;

import React，{useState}来自“React”；
进口{
下拉列表，
下拉开关，
下拉菜单，
下拉项，
按钮
}从“反应带”；
const DropdownPaging=props=>{
var-selectedValue=10；
const[dropdownOpen，setDropdownOpen]=useState（false）；
常量切换=（）=>setDropdownOpen（prevState=>！prevState）；
函数下拉更改（val）{
selectedValue=val；
警报（val）；
}
返回(
{selectedValue}
下拉更改（10）}>
10
下拉更改（25）}>
25
下拉更改（50）}>
50
下拉更改（100）}>
100
);
};
导出默认下拉分页；

---

---

重新启动后，事件不会引发错误，但值仍未设置？

执行

selectedValue=val

不会告诉组件需要重新渲染，它也应该是状态的一部分：

const [selectedValue, setSelectedValue] = useState(10);

function dropDownChanged(val) {
  setSelectedValue(val);
}

---

至于“selectedValue不能为null”。您必须发布堆栈跟踪并显示其来源，因为我看不出在提供的代码中会发生什么情况。

您是如何得到该错误的？只需将您的代码复制到我的项目中，一切正常。你能告诉我们更多它是如何失效的吗？谢谢你使用onclick代替onchange事件-也许这就是问题所在…我在电脑上时会粘贴。感谢快速响应。我不知道这是否有帮助，但我只是插入了你的页面，用常规div替换reactstrap组件，它们工作得很好。警报在单击时工作，{selectedValue}在加载时返回10。我使用了您的示例，它工作了！我习惯了棱角分明，所以我对反应是全新的。所以每次你想渲染一个变量，你就需要像那样使用它？当我观看useState部分时，我认为这是一件大事。这有点奇怪，你需要两个变量。然而，Reach还有很多其他很酷的东西。如果你有逻辑上分组在一起的状态，你可以把它放在一个对象中，例如

const[viewport，setViewport]=useState（{width:0；height:0}）。。。。setViewport（{宽度：500，高度：500}）

。您也可以使用

useReducer

作为替代，但我更喜欢将全局状态放在组件外部的还原器中，并将useState用于组件级状态。有些人将其所有状态放在一个对象中，例如

const[state，setState]=useState（{…所有组件状态}）

和

setState（state=>({…state，selectedValue:99}））

这类似于如果您的组件是一个类，那么它是有意义的。非常感谢。我需要更多关于REACT的经验，然后才能看到我喜欢的内容。但现在它工作了，这是一个开始：D