时间戳

首页 > 解决方案 > 处理状态并传递给组件/react.js

javascript - 处理状态并传递给组件/react.js

问题描述

我正在学习 js 并做出反应，但仍然在努力useState传递信息。我已经拥有的：一个按钮列表，根据用户文本输入进行过滤。我现在需要的是：单击其中一个按钮后，需要将其传递到下一个站点（主页/内容）。我怎么能做到？我需要使用状态吗？

有人能帮我吗？我错过了什么？

export const content = [
  "Apple",
  "Banana",
  "Blueberry",
  "Cherry",
  "Avocado",
  "Pasta"
];

export default function BadgeButtonList({ content }) {
  return (
    <BadgeButtonSection>
      {content.map(item => {
        return (
          <BadgeButton list light key={item.name} item={item.toUpperCase()} />
        );
      })}
    </BadgeButtonSection>
  );
}

export default function Home() {
  const [ searchValue, setSearchValue ] = useState("");
  const [ selectedButton, setSelectedButton] = useState("");

  const history = useHistory();

  const filteredContent = content.filter(item =>
    item.toLowerCase().includes(searchValue.toLowerCase())
  );

  function handleSearch(value) {
    setSearchValue(value);
  }
  return (
    <WrapperDiv>
            
      <Header />
      <Switch>
                      
        <Route exact path="/home">
                    
          <Searchbar onSearch={handleSearch} />
                    
          <BadgeButtonList
            content={filteredContent}
            onClick={() => {
              setSelectedButton();
              history.push("/home/content");
            }}
          />
                  
        </Route>
                
        <Route exact path="/home/content">
          <BadgeButton light item={selectedButton} />
                             
        </Route>
      </Switch>
                 
    </WrapperDiv>
  );
}

标签： javascriptreactjs

解决方案

useState 返回一个只有两个元素的数组。第一个元素是状态值；第二个值是设置值的方法。

您需要将单数更改useState为两个：

const [ searchValue, setSearchValue ] = useState('');
const [ selectedButton, setSelectedButton ] = useState('');

推荐阅读