打印过滤后的数据得到不同的结果

Question

我是 React.js 的新手（使用钩子），想通过简单的编码来学习，我的问题是我正在从 ksngfr.com/something.txt 获取数据，我从那里获取的数据在图片中正如你所看到的（在图片中我刚刚输入了1-4，但它是1-50）。出于某种原因，当我在输入“3”中写入时，它给了我这个（第一张图片）。我从互联网上查了一下并提出了这个解决方案。我想实现这一目标：当用户在输入中写入数字“3”时，它应该转到数据并检查数字 3（即 3:95426），然后仅返回该结果而没有其他内容，例如一个框（数字 3） ）和另一个框其值“95426”。英语不是我的母语，抱歉有错误

我正在获取的数据：

我的代码：

function App() {

  const [data, setData] = useState([]);

  const [searchResults, setSearchResults] = useState([]);

  const [searchTerm, setSearchTerm] = useState("");

  const obj = {};

  useEffect(() => {

    const fetchData = () => {

      let corsAnywhere = "https://cors-anywhere.herokuapp.com/";

      let something = "http://ksngfr.com/something.txt";

       fetch(corsAnywhere + something)

        .then((response) => response.text())

        .then((result) => {

          const theDataArr = result.replace(/\n/g, " ");

          const f = theDataArr.split(" ");

          setData(f);

        });

    };

    fetchData();

  }, []);

  data.forEach((d) => {

    var propertyK = d.split(":")[0];

    var propertyv = d.split(":")[1];

    obj[propertyK] = propertyv;

  });

  const k = Object.keys(obj);

  useEffect(() => {

    const results = k.filter((person) =>

      person.toLowerCase().includes(searchTerm)

    );

    setSearchResults(results);

  }, [searchTerm]);

  console.log(data);

  return (

    <div>

      <input

        type="text"

        value={searchTerm}

        placeholder="Search..."

        onChange={(e) => setSearchTerm(e.target.value)}

      />

      <div>

        {searchResults.map((value, index) => (

          <div>

            <div>

              <IndexBox key={index} index={index + 1} />

            </div>

            <div>

              <ValueBox key={index} value={value} />

            </div>

          </div>

        ))}

      </div>

    </div>

  );

}

export default App;

Answer 1

好的，如果提取有效，请尝试此代码。function App() {&nbsp; &nbsp;const [data, setData] = React.useState([]);&nbsp; const [searchResults, setSearchResults] = React.useState([]);&nbsp; const [searchTerm, setSearchTerm] = React.useState("");&nbsp; const fetchData = () => {let corsAnywhere = "https://cors-anywhere.herokuapp.com/";let something = "ksngfr.com/something.txt";fetch(corsAnywhere + something)&nbsp; .then((response) => response.text())&nbsp; .then((result) => {&nbsp; &nbsp; const theDataArr = result.replace(/\n/g, " ");&nbsp; &nbsp; const f = theDataArr.split(" ");&nbsp; &nbsp; setData(f);&nbsp; });&nbsp; };&nbsp; React.useEffect(() => {fetchData();&nbsp; }, [searchTerm]);&nbsp; React.useEffect(() => {if (data.length) {&nbsp; const mappedResult = data.map((d) => {&nbsp; &nbsp; var propertyK = d.split(":")[0];&nbsp; &nbsp; var propertyv = d.split(":")[1];&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; key: propertyK,&nbsp; &nbsp; &nbsp; value: propertyv&nbsp; &nbsp; };&nbsp; });&nbsp; const results = mappedResult.filter((each) => each.key === searchTerm);&nbsp; console.log("result is: ", results);&nbsp; setSearchResults(results);}&nbsp; }, [data, searchTerm]);&nbsp; return (<div>&nbsp; <input&nbsp; &nbsp; type="text"&nbsp; &nbsp; value={searchTerm}&nbsp; &nbsp; placeholder="Search..."&nbsp; &nbsp; onChange={(e) => setSearchTerm(e.target.value)}&nbsp; />&nbsp; <div>&nbsp; &nbsp; {searchResults.map(({ key, value }, index) => (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <div>{`value is: ${value} and key is: ${key}`}</div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; ))}&nbsp; </div></div>&nbsp; );}const rootElement = document.getElementById("root");ReactDOM.render(&nbsp; <React.StrictMode>&nbsp; &nbsp; <App />&nbsp; </React.StrictMode>,&nbsp; rootElement);<div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>