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

Question

我正在学习 js 和 React，但仍在为 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>
  );
}

Answer 1

useState returns an array with two elements only .第一个元素是状态值；第二个值是设置值的方法。

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

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