Question

我正在学习js，并做出反应，但仍然与useState挣扎，并传递信息。我已经拥有的：按钮列表，该列表根据用户文本输入进行过滤。我现在需要的是：单击这些按钮之一后，需要将其传递到下一个站点（家庭/内容）。我该怎么办？我需要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('');

Answer 2

如果要将数据从一页传递到另一页；您可以使用react-router中的Link组件。然后，您可以使用to属性将数据传递到另一页。 pathname是您要去的路线。像这样：

<Link
  to={{
    pathname: "/home/content", //the path to your next page
    data: data // pass your data to the next page here
  }}
>

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

2 个答案: