过滤和重新显示数据 ReactJS 的问题答案

【问题标题】：Issues With Filtering and Re-Displaying Data ReactJS过滤和重新显示数据 ReactJS 的问题
【发布时间】：2021-07-27 07:49:36
【问题描述】：

我正在尝试通过 RandomUser api 进行过滤以显示男性或女性。我当前的问题是我无法像显示原始数据那样显示过滤后的数据。

这是我当前的代码：

  const [data, setData] = useState('');
  const [gender, setGender] = useState('');
  

  useEffect(() => {
    fetch(`https://randomuser.me/api/?results=500`)
    .then(response => response.json())
    .then(setData);
  }, [])
  


  const FilterData = () => {
    if(gender) {
      var searchedResult
      searchedResult = data.results.filter(
        (e) => e.gender === gender
      );
      console.log(searchedResult)
      console.log(gender)
      setData([searchedResult])
    }
  }


  if(data.results){


    return (
      <div>

        <div>
          <select name="Gender" onChange={(e) => setGender(e.target.value)}>
            <option value="male">Male</option>
            <option value="female">Female</option>
          </select>
          <button onChange={FilterData()}></button>
        </div>

        <ul>
        {data.results.map(results => (

          <li key={results}>
            <p>{results.name.first} {results.name.last}</p>
            <img src={results.picture.medium}></img>
          </li>
        ))}
        </ul>

      </div>
    )
  }
else{
  return(
    <div>loading...</div>
  )
}
}

我认为我的问题适用于我最初如何使用 if/else 语句设置我的 html，导致 html 不断显示“正在加载...”，如果我没有 data.results 但我不太确定我如何将其应用于我的新过滤数组

【问题讨论】：

标签： javascript arrays reactjs filter

【解决方案1】：

我解决这个问题的方法是将获取的数据设置为状态。

然后创建另一个名为filteredData 的状态，以免改变您获取的数据。过滤数据后，您需要一种方法返回原始数据以进行不同的过滤。

在选择性别时，过滤您获取的数据并将filteredData 设置为具有您选择的性别的人员对象数组。

如果filteredData 存在（当gender 更改时由useEffect 设置），映射到它以显示您的数据。如果没有选择gender（因此没有filteredData，则映射data.results数组。

看看这个jsfiddle

【讨论】：

【解决方案2】：

问题在于，当您最初调用 setData 时，您传递的是完整响应，但是当您在 FilterData 中调用它时，您传递的是单个元素数组。然后它不会重新渲染，因为您正在测试不再存在的data.results。

试试这个...

const [data, setData] = useState(null);
const [gender, setGender] = useState('');


useEffect(() => {
    fetch(`https://randomuser.me/api/?results=10`)
        .then(response => response.json())
        .then((data) => {
            setData(data.results)
        });
}, [])


const FilterData = () => {
    if (gender) {
        var searchedResult
        searchedResult = data.filter(
            (e) => e.gender === gender
        );
        console.log(searchedResult)
        console.log(gender)
        setData(searchedResult)
    }
}

if (data) {
    return (
        <div>
            <div>
                <select name="Gender" onChange={(e) => setGender(e.target.value)}>
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                </select>
                <button onClick={FilterData}></button>
            </div>

            <ul>
                {data.map((results, idx) => (

                    <li key={idx}>
                        <p>{results.name.first} {results.name.last}</p>
                    </li>
                ))}
            </ul>

        </div>
    )
} else {
    return (
        <div>loading...</div>
    )
}

【讨论】：