时间戳

首页 > 解决方案 > 在创建新实例之前对值进行反应过滤

javascript - 在创建新实例之前对值进行反应过滤

问题描述

我有一个这样的 React 组件：

export default function RenderEditor(props) {
  const {annotation, onChange, onSubmit, categories, usedCategories} = props;

  const [selectedValue, setSelectedValue] = React.useState(categories[0].categoryName)
  const displayedCategories = categories.filter(category => !usedCategories.includes(category.categoryName))

  //this should be fixed so it also sets the category correctly
  React.useEffect(() => {
    document.addEventListener("keydown",(e) => handleKeyPress(e, setSelectedValue, onChange, categories, annotation, onSubmit, selectedValue))
  }, [])

  //this is used to filter the categories so only the availible categories are displayed

  return (
    <div style={{width: '500px', height: '350px', witdth: '50%', margin: 'auto 0'}}>
      <p>Editor example</p>
      <ValueSelection 
        setSelectedValue={setSelectedValue}
        selectedValue={selectedValue}
        categories={displayedCategories}
        annotation={annotation}
        onChange={onChange}/>
      <br />
      <div style={{textAlign: 'center'}}>
        <Button size={"xl"} gray onClick={onSubmit} style={{textAlign: 'center'}}>
          <span className='appkiticon icon-plus-fill'></span>
          Submit 
        </Button>
      </div>
    </div>
  )
}

我想要实现的是更改此部分：

const [selectedValue, setSelectedValue] = React.useState(categories[0].categoryName)
const displayedCategories = categories.filter(category => !usedCategories.includes(category.categoryName))

...因此它们displayedCategories是上述状态中的默认值，而不像这样：

const [selectedValue, setSelectedValue] = React.useState(displayedCategories[0].categoryName)
const displayedCategories = categories.filt ...

我试图使用useEffect钩子来过滤值，但我也不想支撑钻。关于如何实现此功能的任何好的建议？

标签： javascriptreactjs

解决方案

displayedCategories在你的语句之前计算useState不会违反钩子的规则，所以这很好：

const {annotation, onChange, onSubmit, categories, usedCategories} = props;

const displayedCategories = categories
  .filter(category => !usedCategories.includes(category.categoryName))

const [selectedValue, setSelectedValue] = React.useState(displayedCategories[0].categoryName)

然后，如果您还想在or属性更改selectedValue时进行更改，可以添加如下内容：categoriesusedCategories

React.useEffect(() => {
  setSelectedValue(displayedCategories[0].categoryName);
}, [categories, usedCategories]);

推荐阅读