当地图为地图时，React中的过滤器方法不起作用

Question

我在React中使用三元检查。如果项目存在，则触发.map方法，如果不存在，则触发.filter方法。地图工作正常，但过滤器工作不正常。抛出一个错误，说一个对象不是有效的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>
                    </>
                  );
                }
              })}

Answer 1

在JavaScript中filter用于根据条件创建新的数组。您的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>
                    </>
              ))}