我在 React 中使用三元检查。如果某个项目存在，则会触发 .map 方法，如果不存在，则会触发 .filter 方法。 map 工作正常，但过滤器却不行。它抛出一个错误，指出对象不是有效的 React 子对象，并使用数组。然而，据我了解，它是一个数组......
{test.searchTerm === ""
? test.users.map((item, index) => (
<>
<tr>
<td>{index + 1}</td>
<td>{item.name.first + " " + item.name.last}</td>
<td>{item.email}</td>
<td>{item.gender}</td>
<td>{item.phone}</td>
<td>
<img src={item.picture.thumbnail} alt=""></img>
</td>
</tr>
</>
))
: test.users.filter((item, index) => {
//console.log(test.users)
if (
test.searchTerm === item.name.first ||
test.searchTerm === item.name.last ||
test.searchTerm === item.name.first + " " + item.name.last
) {
return (
<>
<tr>
<td>{index + 1}</td>
<td>{item.name.first + " " + item.name.last}</td>
<td>{item.email}</td>
<td>{item.gender}</td>
<td>{item.phone}</td>
<td>
<img src={item.picture.thumbnail} alt=""></img>
</td>
</tr>
</>
);
}
})}
最佳答案
在 JavaScript 中 filter用于根据条件创建一个新数组。您的过滤方法应该为匹配元素返回 true，否则返回 false。之后，您必须映射生成的过滤数组。过滤后，您仍然有一个对象数组。
{test.searchTerm === ""
? test.users.map((item, index) => (
<>
<tr>
<td>{index + 1}</td>
<td>{item.name.first + " " + item.name.last}</td>
<td>{item.email}</td>
<td>{item.gender}</td>
<td>{item.phone}</td>
<td>
<img src={item.picture.thumbnail} alt=""></img>
</td>
</tr>
</>
))
: test.users.filter((item, index) => {
//console.log(test.users)
if (
test.searchTerm === item.name.first ||
test.searchTerm === item.name.last ||
test.searchTerm === item.name.first + " " + item.name.last
) {
return true;
}
return false
}).map(item => (
<>
<tr>
<td>{index + 1}</td>
<td>{item.name.first + " " + item.name.last}</td>
<td>{item.email}</td>
<td>{item.gender}</td>
<td>{item.phone}</td>
<td>
<img src={item.picture.thumbnail} alt=""></img>
</td>
</tr>
</>
))}
关于arrays - React 中的过滤器方法在 map 可用时不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60241365/