小编Ram*_*ddy的帖子

我有几个组件需要访问相同的玩家列表。这个玩家列表不会改变，但我不知道哪个组件首先需要它。我的想法是，无论哪个组件首先需要它（axios 请求）更新我的 redux 存储，然后其他组件将仅使用相同的自定义挂钩。

export default function usePlayersList() {
  const {list, loading, error} = useSelector(state => state.accounts.players)
  const dispatch = useDispatch()
  
  useEffect(() => {
    try {
      const response = authAxios.get(endpoints.players.retrieve)
      response.then(res => {
          dispatch({
            type: "SET_PLAYERS_LIST",
            payload: {
              error: false,
              loading: false,
              list: res.data.payload
            }
          })
        })
    } catch (e) {
      console.log(e)
      dispatch({
        type: "SET_PLAYERS_LIST", 
        payload: {
          error: true,
          loading: false,
          list: []
        }
      })
    }
  }, [dispatch])
  return {list, loading, error}
}

这是我为此定制的钩子。想知道这样做是否有任何不便，或者是否有更好的模式。提前致谢。

顺便说一句...更好的是，我将加载和错误设置为 usePlayersList 中的 useState 变量（而不是将它们发送到 redux …

是否有一个命令可以列出在本地主机的不同端口上运行的所有服务？

就我而言，当我开发 Angular 应用程序时，我可能会在 localhost:4200 上运行它，在 localhost:3000 上运行 React 应用程序，在 localhost:6379 上运行 Redis 服务器，等等。

有没有办法知道它们是否正在运行以及如何杀死/停止它们？

让我们创建一个非常简单的钩子useDouble，它返回一个数字的双精度：

export default function useDouble(nb) {
  return nb * 2;
}

文档（https://reactjs.org/docs/hooks-custom.html#extracting-a-custom-hook）内容如下：

自定义 Hook 是一个 JavaScript 函数，其名称以“use”开头，并且可以调用其他 Hook

但如果我useDouble改为double，它仍然有效。我什至尝试从double钩子中调用其他钩子，它仍然有效。

演示：https : //codesandbox.io/s/laughing-gareth-usb8g?file=/ src/ components/WithUseDouble.js

所以我的问题是：命名钩子useXxxxx只是一种约定，还是真的能以某种方式打破某些东西？如果可以，你能举个例子吗？

谢谢

有时我会在 内部声明柯里化函数时使用这种模式useCallback。

const Child = ({ handleClick }) => {
  return (
    <>
      <button onClick={handleClick("foo")}>foo</button>
      <button onClick={handleClick("lorem")}>lorem</button>
    </>
  );
};

export default function App() {
  const [state, setState] = useState("");

  const handleClick = useCallback(
    (newState) => () => {
      setState(newState);
    },
    []
  );

  return (
    <div className="App">
      <Child handleClick={handleClick} />
      <p>{state}</p>
    </div>
  );
}

因为我想将参数从 JSX 传递到事件处理程序并避免多个处理程序。

当组件重新渲染时，handleClick将被调用，返回的函数将被分配给 prop onClick，但它每次都是一个新函数还是嵌套函数也会被 记忆useCallback？

PS：这是一个简单的例子。假设useCallback具有多个依赖项的用法

我以为我掌握了提升的概念，但下面的代码让我感到困惑。怎么返回1呢？第二个 example() 函数会被提升到第一个函数之上吗？

function example() {
  return 9;
}

console.log(example());

function example() {
  return 1;
}

如果在编译阶段提升函数声明并在执行阶段执行函数表达式。下面的代码为什么返回7？这仅仅是因为首先声明了示例表达式吗？

var example = function() {
  return 7;
}

console.log(example());

function example() {
  return 0;
}

先感谢您！

将数组视为

const foo = [1, 2, 3];

现在，如果我想替换第二个元素，我可以这样做：

foo[1] = 4;或者

foo.splice(1,1,4);或者

const foo = [1, 2, 3];

console.log([...foo.slice(0, 1), 4, ...foo.slice(2)]);
// I know this creates a new array unlike the above two ways.

但是当我们使用扩展运算符来浅复制对象时，我们可以动态地覆盖一个属性，例如：

const someObject = {
 a: 1,
 b: 2,
 c: 3
}
const propertyToChange = 'b';

const newObject = { ...someObject, [propertyToChange]: 4 };

那么，数组有等价的吗？也许类似于下面的内容来根据索引更改元素。

const newArray = [...oldArray, [dynamicIndex]: 4 ];

在一次采访中，我被要求猜测以下代码片段的输出：

var foo = 1;
    
function bar() {
    foo = 10;
    return;
    function foo() {
    }
}

bar();

console.log(foo);

我认为输出将是 10，因为 bar 函数在重新分配 foo 的值后立即返回，但实际输出为 1。是否因为函数定义具有相同的变量名（foo）？是否为foo里面的变量创建了一个新的作用域bar？

这可能是初学者的 React 错误，但我想使用“add2Messages”调用“addMessage”两次，但它只注册一次。我猜这与 React 中的 hooks 工作方式有关，我该如何使其工作？

export default function MyFunction() {
  const [messages, setMessages] = React.useState([]);

  const addMessage = (message) => {
    setMessages(messages.concat(message));
  };

  const add2Messages = () => {
    addMessage("Message1");
    addMessage("Message2");
  };

  return (
    <div>
      {messages.map((message, index) => (
        <div key={index}>{message}</div>
      ))}
      <button onClick={() => add2Messages()}>Add 2 messages</button>
    </div>
  );
}

我正在使用反应 17.0.2

我想显示来自 React 的数组列表，但当我认为我做的一切都正确时它没有显示？请问我哪里错了

下面是代码

import { useState } from 'react';

function App() {
   
  const [items , setItems] = useState([{
       id:1,
       text:'simple 1'
  },
  {
    id:1,
       text:'simple 2'
  },
  {
    id:1,
    text:'simple 3'
  },

])

  return (
    <div className="App">
    
    {items.map((item) => (
      <h1>{items.text}</h1>
    ))}


     <h1>Hello from React js</h1>
    </div>
  );
}

export default App;

前不久刚学javascript，正在练习点击后如何添加颜色，再次点击时可以取消颜色！

但即使我上网查了一下，我还是不知道\xe2\x80\x99哪个语法是错误的？

希望得到您的指导，谢谢~

let add = document.querySelector(\'.add\');\nlet box = document.querySelector(\'.box\');\n\n\nadd.addEventListener(\'click\',function(e){\n  e.preventDefault();\n  box.setAttribute(\'class\',\'blue\');\n})

.add {\n  display: block;\n  margin-bottom: 100px;\n}\n\n.box {\n  width: 100px;\n  height: 100px;\n  border: 1px solid;\n}\n\n.blue {\n  background-color: blue;\n}

<a class="add" href="javascript:;">click</a>\n\n<div class="box"></div>

\n