时间戳

首页 > 解决方案 > 如何在 React 中过滤传入的道具？

javascript - 如何在 React 中过滤传入的道具？

问题描述

我正在尝试使用钩子构建一个搜索栏，但是我传递给我的功能组件的道具给了我错误，并且输出永远不会加载。我将opt道具从 options.js 传递给Filter.js。这是代码： Options.js

import Filter from './Filter'
import Option from './Option'

export default (props) => {
    return (
        <div>
            <button onClick={props.handleDeleteOptions}>Remove All</button>
            {props.options.length === 0 && <p>Please add option to get Started!</p>}
            {
                props.options.map((x) => <Option key={x} optionText={x}
                    handleDeleteOption={props.handleDeleteOption}
                />)
            }
            <Filter opt={props.options} />
        </div>
    );

}

过滤器.js


export default (props) => {

    const [option, setOption] = React.useState(props);
    const [search, setSearch] = React.useState("");

    return (
        <div>
            <input
                onChange={e => {
                    const test = props.opt.filter(o => {
                        return o.toLowerCase().includes(e.target.value.toLowerCase());
                    });
                    console.log("Option: ", test);

                    setOption(test);
                    setSearch(e.target.value);
                }}
                type="text"
                value={search}
            />
            {props.opt.map(o => (
                <p key={o}>{o}</p>
            ))}


        </div>
    )
};

标签： javascriptreactjs

解决方案

在你Filter.js身上，你直接映射props.opt. 当您执行过滤器时，这不会改变。改变的是状态。您需要更改两件事才能使其正常工作：

  • 修复默认option状态：const [option, setOption] = React.useState(props.opt);
  • 修复选项映射。代替props.opt, 使用option状态。

推荐阅读